display:table 을 이용한 가로/세로 가운데 정렬

display:table / display:table-cell 을 이용한 가로/세로 가운데 정렬

<style>
    .display_table { display:table; width:200px; height:200px; border:2px solid #6d82f3;}
    .display_table_cell { display:table-cell; text-align:center; vertical-align:middle; }
</style>
 
 
<div class="display_table">
    <div class="display_table_cell">가운데 정렬</div>
</div>

가운데

전체를 감싸고 있는 div에 display:table;를 입력하고

가운데 정렬 하려는 div에 display:table-cell; vertical-align:middle;를 입력하면 된다.

display:table / display:table-cell 에 대한 설명 보러가기 게시글 보기