div 내용을 수직으로 정렬하는 방법

div 내부의 내용을 수직으로 정렬할 수 있는 방법은 없을까?

결국 vertical-align 옵션을 middle로 주면 되는데

div 자체에 적용하면 먹히지 않는다!(아직 html에서 표준으로 지원하지 않는 것 같다.)

따라서 고수들은 다음과 같은 꼼수(?)를 사용해서 div 수직 정렬을 자연스럽게 처리한다!

div 내부에 1칸짜리 table을 놔둔 다음에

얘를 수직으로 정렬 시키는 방법이다.(크기는 100%로 지정하고 테두리는 숨기고!)

다음은 예제 소스인데 쉽게 이해할 수 있을 것이다!(효과도 만점이다!)


<div>
    <table style="width: 100%; height: 100%;" border=0>
        <tr>
            <td style="vertical-align: middle;">
                내용
            </td>
        </tr>
    </table>
</div>