垂直・水平方向に子要素を中央揃え

CSSレイアウトで水平方向の中央揃えはできても、垂直方向の中央揃えは難しいですね。
今回は画像を親要素の垂直・水平方向に中央揃えを行います。
header部分へのロゴの配置などに使えるテクニックです。

1. position:absoluteで絶対配置します。
2. 親要素にposition:relativeを設定して親要素を起点にします。
3. top:50%の指定で親のちょうど半分の縦位置にｙ軸を設定します。
4. 同様にleft:50%の指定で親のちょうど半分の横位置にx軸を設定します。
5. このままでは画像の左上が起点になっていますので中央には来ません。
   ネガティブマージンで画像を上と左に画像自身の大きさの半分の値だけ動かします。

できあがりサンプル

HTMLコード

<div class="wrapper">
<img src="DSC0025.jpg">
Lorem ipsum ....elit. 
</div>

CSSコード

.wrapper{
	background-color:pink;
	position:relative;
}
img{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-127.5px;
	margin-left:-190px;
	opacity:0.5;
}

opacity:0.5;は画像の背面にテキストが入り込んでいることを確認できるように半透明にしています。