IE6, 7 向け CSS の指定

さて、例によって IE6, 7 はdisplay: tableに対応していません。
そのため、display: table 以外の方法で垂直方向のセンタリングを実現します。

HTML ソースを見てもらうと分かりますが、まず body 要素直下に IE6, 7 のみに条件付コメントで<span id="dummy">&nbsp;</span>を読み込ませます。

IE6, 7 向けのテクニックは、インライン要素の場合はvertical-align: middleで要素が垂直方向にセンタリングされることを利用したトリックです。

条件付コメントで読み込んだ span 要素をまずdisplay: inline-blockでインラインブロック要素に変換します。
この inline-block、IE6, 7 の場合インライン要素には仕様通り指定できるのですが、なぜかブロック要素に指定しても無視される、という不思議な仕様があります。

なので span 要素でなくても構いませんが、インライン要素を入れるようにしてください。

さて、インライン要素の場合は vertical-align: middle で要素が垂直方向にセンタリングされる、ということは説明しました。
なので、インライン要素の高さがブラウザ領域いっぱいと同じになり、表示されている内容がすべてインライン要素であるなら、垂直方向にセンタリングできる、ということを意味します。

先の inline-block を挿入した理由はこの「インライン要素の高さがブラウザ領域いっぱい」となるようにするためのトリックです。

inline-block を指定した要素は、インライン要素でありながら高さや幅を持つことができるようになります。
なので、height: 100%を指定すればブラウザ領域いっぱいに高さが確保されます。

続くトリックは、画面の中央に表示したい要素を "inline-block のような状態" にします。
そもそも IE6, 7 はブロック要素には display: inline-block は指定できません。
そこでさらにトリックを使い、"inline-block のような状態" を実現します。

主要プロパティは 2 つ。display: inlineとzoom: 1です。
IE6, 7 にはhasLayoutという独自仕様があります。
hasLayout とは、その名の通り "レイアウトを持っているかどうか" を識別するものです。

レイアウトを持っている、とは、width や height などのいわゆるブロック要素のような状態を言います。
通常、インライン要素は width や height が指定できないので hasLayout は false になります。
しかし、この hasLayout を true にする CSS プロパティが存在します。

それがzoom: 1、というわけです。
さてここで、display: inline を指定したことによって画面中央に表示したいブロック要素（サンプルでは #blockCentering）はインライン要素となります。
さらに、zoom: 1 によって "レイアウトを持っている状態" となります。

つまり、インライン要素でありながらブロック要素と同じようにレイアウト情報を持っている、ということになります。これって display: inline-block と同じですよね。

こうして無事、IE6, 7 でも inline-block をブロック要素にも適用することができました。
最後に、#dummy と #blockCentering に対してvertical-align: middleを指定すれば、body 要素直下にはインライン要素のみが存在することになり、さらに vertical-align: middle で要素が垂直方向にセンタリングされる、というわけです。