フォローする

CSSの小技。高さが不明なボックスの中で中央に配置する方法

【CSS3】高さ不明の要素のボックス内で上下中央配置する方法

ボックス内でテキストを上下中央にそろえたい、ということは良くありますが、テキストが2行、3行にわたり、高さが指定できない場合、これまではよくネガティブマージンなどを使って対処してきました。
それをたった3行のCSSで叶えてしまうのがこちら。

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

まず、ボックス内のテキストを、上から50%のところに配置します。
半分から下の位置にテキストが表示されます。

◆HTML側

<div class="demo01">
<p>テキストサンプル</p>
</div>

◆CSS側

.demo01{
background-color:#6CF;
height:200px;
}
.demo01 p{
position:relative;
top:50%;
}

◆実行結果

demo01

ここから、テキストの高さの半分だけ、上に配置させるため、CSS3の
transform :translateY(Y方向の移動距離)
を使用します。
値は-50%。前述した通り、テキストの半分を上(マイナス)方向にずらすためです。ベンダプレフィックスを付けて、先ほどのCSSにtranceformを追加。
.demo01 p{
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}