CSSの小技。高さが不明なボックスの中で中央に配置する方法
【CSS3】高さ不明の要素のボックス内で上下中央配置する方法
ボックス内でテキストを上下中央にそろえたい、ということは良くありますが、テキストが２行、３行にわたり、高さが指定できない場合、これまではよくネガティブマージンなどを使って対処してきました。
それをたった３行の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%;
}
◆実行結果
ここから、テキストの高さの半分だけ、上に配置させるため、CSS3の
transform ：translateY(Y方向の移動距離)
を使用します。
値は-50％。前述した通り、テキストの半分を上（マイナス）方向にずらすためです。ベンダプレフィックスを付けて、先ほどのCSSにtranceformを追加。
.demo01 p{
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}