幅と高さが成り行き（固定の値を持たない）要素の場合は、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;のように、要素の半分の値をネガティブマージン指定してあげる方法もある。