CSSで垂直方向の中央に配置するのがややこしい

CSSで、画像や動画を垂直方向の中央に配置したいと考えた。さっそくどのプロパティを使えばいいかググったのだが・・・どうもプロパティ一発というわけにはいかないようだ。もちろん、この問題は、いまさら知らなければモグリであるほどの古典的なものだが、CSSグルではない私は知らなかったので、書いておこうと思う。

もちろん、垂直に中央配置する方法はある。しかしどの方法も、汚いハックなのである。さらに、大抵の初心者が陥る問題がある。

まず誤解しやすいのが、vertical-alignプロパティであろう。これは名前が宜しくない。vertical-alignは、インライン要素のラインボックス（つまり文字列のレイアウト）の垂直方向の配置を指定するためのプロパティである。残念ながら、凡人が期待するようには動かない。

ただし、テーブルセルにvertical-alignを適用した場合のみ、凡人が期待するように動く。つまり、要素自体のアラインを垂直方向に対して指定できる。

CSS 2.1: vertical-align
CSS2.1: Table height algorithms

つまり、vertical-alignには、二つの全く異なる機能が混在しているといっていい。なんとも悲惨な仕様である。

ただし、このテーブルセルの仕様は利用できる。つまり、displayプロパティで、要素をtable-cellに変えてしまえば、vertical-alignが使えるのだ。ただし、その要素を囲むdisplayプロパティがtableな要素が必要になってしまうのが欠点だが。

<div style=" display : table ; ">
    <div style=" display : table-cell ; vertical-align : middle ; ">
        <!-- 実際のコンテンツ -->
    </div>
</div>

この方法は、コンテンツのheightをあらかじめ知っておく必要はないし、コンテンツのheightを動的に変えても問題のない、現時点で最良の方法である。IE8以下では動かないようだが、CSSの信奉者は、IE8などという劣ったブラウザーはもとより使わないので問題はない。

一応、CSS 3には、Flexible Box Modelというのが提案されているようだが、どうも仕様が二転三転して、未だに固まっていないように思われる。現時点では、まだ使うべきではない。