블럭 레벨 엘레멘트의 수직 정렬

 block 레벨 엘레멘트를 가운데로 정렬하는 속성은 없다. 따라서 영역을 수직상 가운데로 정렬하기 위해서는 다음과 같은 방법을 사용해야 한다. 아래의 문서에서 content 영역을 수직상 가운데 정렬하는 방법은 다음과 같다.

 

<div id="container">

    <div id="content"></div>

</div>

 

■ Display 속성을 table로 하기

 

 Container 영역에 display 속성을 table로 지정한 후, content의 속성에 vertical-align:center 를 추가하는 방법이다. 즉, container 영역을 테이블로 하여 가운데 정렬 시키는 방법이다.  

 

#container { display: table; }

#content { vertical-align: center; } 

 

 

■ absolute 속성 이용하기

 content 영역에 absolute 속성을 지정하고 margin-top 속성에 값을 50%로 준다. 이렇게 속성을 부여하여 content영역을 가운데로 위치시킨다.

 

#content { position: absolute; margin-top: 50%; }

 

■ line-height 지정하기