CSS의 세로 중앙 정렬은 display: table-cell;이라는 간단한 방법으로 해결할 수 있습니다만, 글을 쓰는 현재 가장 많이 사용되는 브라우저인 IE가 이것을 지원하지 않기 때문에 항상 까다로운 문제였습니다. (IE8 – 베타 (8.0.6001) 버전 – 은 지원하는 것 같지만 아직 버그가 있는 듯 합니다.) 많은 꼼수가 있지만 사용에 많은 제약이 있었죠. 그런데 yomotsu라는 일본인이 간단하면서도 명쾌한 아이디어를 내놓았습니다.

IE6, 7에 대해서는 display:inline-block; 과 같은 효과를 내게 합니다. ( inline-block 이 지정된 요소에도 vertical-align 이 유효하게 됩니다.)

div.sample1 div{
    display:table-cell;
    width:100px;
    vertical-align:middle;
}

* html div.sample1 div{ /* IE 6 */
    display:inline;
    zoom:1;
}

*:first-child+html div.sample1 div{ /* IE 7 */
    display:inline;
    zoom:1;
}

IE에 display: inline; 부여 후 zoom 속성을 통해 레이아웃 요소로 만듦으로서 inline-block 의 효과를 만드는 것이 핵심입니다. display: table-cell; 이 적용되지 않은 블럭 요소는 세로 중앙 정렬이 되지 않고 inline 이 적용된 요소는 세로 중앙 정렬이 되는 차이를 미묘하게 이용한 것이지요.

지원 브라우저

yomotsu님의 글에서 발췌한 내용입니다.

• 파이어폭스 1, 2
• 넷스케이프 6, 7.1
• 사파리 2, 3
• 오페라 9.2 이상
• IE 5.01, 5.5, 6, 7 ( inline-block 으로 구현 )

제약사항

이 방법의 제약사항은 인라인 요소의 세로 중앙 정렬은 다른 인라인 요소의 최대값에 영향을 받는다는 것입니다. 이것은 가로 너비를 갖지 않는 – 공간을 차지하지 않는 것처럼 보이는 – 마크업을 삽입하여 해결할 수 있습니다. 당신이 시맨틱 마크업 신봉자라면 IE Conditional Comments 필터링이나 자바스크립트와 DOM을 통해 의미없는 마크업을 삽입할 수 있겠습니다. 이마저도 싫다면… 글쎄요. ㅠㅠ

또 한가지가 IE를 위해 사용하는 핵입니다. IE7 구분을 위해 사용되어 온 핵 *:first-child+html이 현재의 IE8 – 베타 (8.0.6001) 버전 – 에도 적용되고 있고 IE8은 display: table-cell;을 지원하고 이전 버전과 달리 레이아웃(hasLayout)이 사라졌기 때문에 yomotsu님이 사용한 IE용 핵과는 다른 방법 - 예를 들어 IE Conditional Comments 필터링 – 으로 적용하기를 추천합니다. 아래 예제에는 IE Conditional Comments 필터링을 사용하였습니다.

IE7 이하에서 세로 중앙 정렬할 요소가 차지하는 영역이 다른 최신 브라우저들과 다를 수 있습니다. 이미지와 텍스트가 나란히 출력되는 예제에서 텍스트에 배경색이 부여된 영역을 비교해보세요.

몇가지 예제

• 이미지와 텍스트가 나란히 출력되는 예제
• 텍스트를 높이가 지정된 블럭요소의 세로 중앙에 위치시키는 예제

참고 URL

• Position browse
• 이미지 등의 옆에 있는 텍스트를 상하중앙으로 배치하기
• Display
• hasLayout 속성과 홀리 핵(Holly hack)
• Vertical Centering With CSS: 이 글에서 다루지 않은 다른 여러가지 방법에 대한 소개. 괜찮은 방법이 많다.