div 가운데 정렬 (세로)

 

 

 

오늘은 div를 세로로 중앙정렬 하는법에 대해서 알아보려고 합니다.

예전에 div가로로 가운데 정렬하는 법을 포스팅 했었는데요!

그 내용이 궁금하신 분은 아래 링크를 클릭하시면 됩니다~

 

div 가운데 정렬 보러가기

 

div 가운데 정렬처럼 세로 중앙 정렬도 아주 간단하니까~ 한번 따라해보세요!

<style>
     .wrap {
         position:absolute;
         top:0;
         left:0; 
         width:100%; 
         height:100%; 
         background:#C96;}
         
     .box {
         position:absolute;
         top:0;
         left:0;
         right:0;
         bottom:0;
         margin:auto 0;
         width:300px;
         height:300px;
         background:#C03;}
</style>



<div class="wrap">
     <div class="box""></div>
</div>

 

 

 

세로 가운데 정렬을 할 div 에 가로세로값을 픽스해준 후에

position:absolute; top:0; left:0; right:0; bottom:0; margin:auto 0; 만 추가해 주시면 됩니다~

 

 

 

코드 긁기가 안되서 아래 html파일 첨부하였습니다.

쓰기 귀찮으신분은 다운받아서 카피 ㅇㅅㅇ) ㅋㅋㅋ ㅋㅋㅋ

 

 

div 세로 가운데 정렬.html

다운로드