display: table

 

display:table은 그말 그대로, table로 보이도록 하는것이다.

만약 distplay: table-cell; 을 가지고 있다면, 그 요소들은 블럭 요소라도 한 행에 위치하고, 폭과 높이가 동일하게 된다. td처럼 셀을 만드는것이다.

 

가로로 정렬하야하는 요소에 table-cel을 부면 float 하지 않아도 정렬할수 있다.

그리고, 세로로 가운데 정렬도 간단하다.

 

 HTML

 

<div class="vertical_wrap">
  <div class="vertical_table">
    <div class="vertical_cell">
      세로 가운데 정렬
    </div>
  </div>
</div>