幅と高さが成り行き(固定の値を持たない)要素の場合は、margin
だけでは明確な位置調整が困難。そういう場合に使用するCSSのスタイル設定方法をご紹介。
配置イメージ
コード
<div class="box">
<div class="inner">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
</div>
.box {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
解説
仕組みは簡単で、まず要素を上から50%、左から50%の位置に配置する。この50%は包含ブロックに対しての50%となるので、下図の位置にインナー要素は配置される。
次にtranslate: (-50%, -50%);
で要素の50%分をマイナスしてずらす。この50%はinnerの50%となるので、結果的にちょうど天地中央の位置になる。
innerの幅と高さがあらかじめ分かっている場合は、margin: -100px 0 0 -100px;
のように、要素の半分の値をネガティブマージン指定してあげる方法もある。