mbg1346 - flex로 세로 가로 정렬 하기

팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나

요즘 가장 많이 쓰는 방법은 바로 flex.

flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나 지금은 익스를 많이 배제하므로 Pass~~


<div class="box">
  <p>
    팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나, 
    요즘 가장 많이 쓰는 방법은 바로 flex!!
  </p>
</div>

<style>

.box { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%; height: 300px; border: 1px solid #000; text-align: center; }

.box p { width: 300px; height: 200px; border: 1px solid #ff6600; }
</style>

팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나, 요즘 가장 많이 쓰는 방법은 바로 flex!!

List of Articles
번호	분류	제목	조회 수	평점
75	css	굵은 폰트만 따로 글꼴 지정하는 방법	44
74	JavaScript	잠시 보고 사라지게 만드는 javascript	39
73	css	하단 영역을 브라우즈의 최하단에 고정시키는 방법	33
72	css	테두리(border) 상자에 화살표 모양 css로 출력하기	986
71	html	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 6	33,298	5.0점
70	css	스크롤 바(Scrollbar) 스타일링	728
69		DIV 영역 자체에 링크 거는 방법 4	32,634	5.0점
68	JavaScript	현재 시간 실시간으로 카운트 출력	1,306
67	css	line-height 와 height의 차이점	1,858
66	css	css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리 1	3,022

»	html	flex로 세로 가로 정렬 하기 1	1,399
64	JavaScript	버튼 클릭시 클립보드에 복사하는 방법	3,228
63	css	Hover시 테두리두께 설정	3,818
62	css	CSS 색상 이름 rgb , 16진수 자료( css 색상표 )	2,013
61	css	display 속성: inline, block, inline-block	1,527
60	css	글 색상을 랜덤으로 출력하기	1,633
59	css	div 영역에 Width:100%; height:100%; 적용해 보기 - display:table	2,575
58	JavaScript	홈페이지에 화려한 에니메이션 효과를 주기 - aos animate	3,528
57	css	웹퍼블리셔가 알고있어야 할 display:table 속성 4	1,410
56		HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때	2,501

번호

분류

제목

조회 수

평점

css

굵은 폰트만 따로 글꼴 지정하는 방법 file