これまでいろいろな方法で実装してきましたが、どれもそれなりに手間が掛かってしまっていた縦中央揃え。古いブラウザに対応しなくてよい場合のとても簡単な方法が紹介されていました。
タイトルにある通りIE9以上で使え、親と子どちらの高さも指定する必要なし。CSSの記述も簡潔です。
■HTML
<div class="sample">
<p>天地の中央に配置</p>
</div>
■CSS
.sample p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
ベンダープレフィックスはつけておきます。
transform が使えなかった頃は子要素の高さの半分を数値で入れる必要がありましたが、IE8以下が減ってきたことでようやく実用的になってきたのかな、と思います。
コメントする