[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle

css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle

결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다.

div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다.

 

보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는

vertical-align:middle을 사용한다.

하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다.

이 때 div의 display속성을 table-cell로 부여함으로써 마치 테이블셀에서의 수직정렬을 가운데로 정렬시킨것과 같은 효과를 얻게 된다.