[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）
Post on:2014年1月20日
sponsors
モダンブラウザだけでなくIE9にも対応した、3行のスタイルシートで画像でもテキストでも天地の中央に配置するテクニックを紹介します。
中に配置する画像やテキストの高さも不明、外側のボックスの高さも不明で、天地中央に配置できます。
Vertical align anything with just 3 lines of CSS
デモ
実装方法の前にまずは、デモから。
手軽に利用できるので、テキストを天地中央に配置するデモを作成してみました。
天地の中央に配置
デモページも用意されており、下記ではテキストや画像などが天地中央に配置されています。
実装
Step 1: HTML
余分なタグは必要ありません。
classを付与しておくと使い回しができるので便利です。
<div class="demo"> <p>天地の中央に配置</p> </div>
Step 2: CSS
3行のスタイルは、こんな感じです。
positionをrelativeにし、topから50%に配置し、さらにtransformで自身の高さの50%を上方向に移動させて配置します。%で配置するので、容器も要素も高さ不明で天地中央に配置できます。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
利用する時は、各ブラウザ用のベンダプレフィックスを加えます。
.demo p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
sponsors
