css로 div 가운데 정렬.

div를 브라우저 가운데 정렬하는 css 입니다.

방법은 여러가지 인데. 간단하게 width와 height가 고정된 div라면 

top,left 50%와 margin-top,left를 width와 height의 절반씩 마이너스 해주면 잘 됩니다.


ex)

width:400px -> margin-left: -200px;

height:500px -> margin-top: -250px;


//------------------------------------------------------------------------------------------------------------------------------------------------


 <style>

    #wrapper {

          width: 200px;

          height: 200px;

  border: 1px solid black;


  position:absolute;

  top:50%;

    left:50%;

  margin-top: -100px;

  margin-left: -100px;

    }

  </style>


  <div id="wrapper">

  가운데 정렬 ?

  </div>


//------------------------------------------------------------------------------------------------------------------------------------------------


div를 브라우저 가운데 정렬하는 css 끝~!!


이 글을 공유하기

댓글

Designed by JB FACTORY