縦、横の長さが不明なものや一定ではないものを要素の中央に配置することが出来ます。
コード自体もとても簡単です。

普通に要素内に画像を配置した場合は下記のようになってしまいます。

サンプル用HTML
divとspanにてサンプルを作成しています。

<div class="sample_div">
<span class="sample_span">初期配置</span>
</div>

縦方向に中央にする
下記のコードをサンプルに適用します。

#sample1{
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

display:blockにして中の要素をブロックにします。
position: relativeで親の要素と相対的に配置を行います。
top:50%で親要素の上から50%の位置に要素を配置。
transform:translateX(-50%)でオブジェクトの高さ半分上に移動。


横方向に中央にする
下記のコードをサンプルに適用します。

#sample2{
	display: block;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

こちらも縦方向とほぼ一緒です。
display:blockにして中の要素をブロックにします。
position: relativeで親の要素と相対的に配置を行います。
left:50%で親要素の左から50%の位置に要素を配置。
transform:translateX(-50%)でオブジェクトの幅半分横に移動。



縦横方向に中央にする

#sample3{
	display: block;
	position: relative;
	top:  50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

こちらは縦、横の組み合わせです。
display:blockにして中の要素をブロックにします。
position: relativeで親の要素と相対的に配置を行います。
top:50%で親要素の上から50%の位置に要素を配置。
left:50%で親要素の左から50%の位置に要素を配置。
transform:translate(-50%, -50%)でオブジェクトの高さ、幅、半分横に移動。




«前の記事：CSS　テーブル、リストに特定行に効果を指定Mysqlが遅い時の対処方法：次の記事»