IE ではdisplay:table-cellが効かない

実は display:table-cell がインライン要素にしか効かないと、貧弱な情報網によりつい先日知りました。
だから div や p などの要素で囲む場合は、一番外側の要素に display:table が必要なのですね。

複数行の文章を、縦中央方向にセンタリングしたい時は

[code]
<div class="box">
<ul>
<li>苦難は</li>
<li>幸福への</li>
<li>羅針盤</li>
</ul>
</div>
[/code]

このようなhtmlの場合

[code]
div.box { display: table; }
div.box ul { display: table-cell; vertical-align: middle; }
[/code]

cssは上記でできるのですが
例によってIEでは効きません。

しかもIE9でも効きません。
cssの「どのブラウザからこのスタイルシートが使える」という指標は、完全ではないようです。

そういう場合、IEハックの出番です。

[code]
div.box { display: table; }
* html div.box { position: relative; }
*+html div.box { position: relative; }
div.box ul { display: table-cell; vertical-align: middle; }
* html div.box ul { position: absolute; top: 50%; }
*+html div.box ul { position: absolute; top: 50%; }
* html div.box ul li { position: relative; top: -50%; }
*+html div.box ul li { position: relative; top: -50%; }
[/code]

こちらを参考……というか丸パクリさせていただきました。

tableを使わずdivで縦位置を指定（Scuderia Web様）

ネガティブマージンがIEでは効かないことから、position のマイナス値も一瞬戸惑いましたが、問題はないようです。
ホッとしたのですが、考えてみれば、問題あるはずがないかもしれませんね。
マイナス効かなかったら position の意味があんまりないかも。

【ハートブレーン】https://blog.heart-kokoro.net