CSS基礎　要素をウィンドウの縦横中心に揃えて配置する方法 – ネガティブマージンの活用方法

どうもこんにちは！今回は…【CSS基礎　ウィンドウの中心に要素を配置する方法 – ネガティブマージンの活用方法】について書きたいと思います。意外に要素を中央に配置したい場面は多いのでメモしておきます。ちなみに注意するところIE6の存在です。

要素のセンター揃え（横方向）

今回はウィンドウよりも大きな要素をセンター寄せにしてみます。概要は以下のようになります。

最初の状態

HTMLは共通です。今回は画像ですが他の要素でもかまいません。

<img id="center" alt="センター寄せしたい要素" src="images/hugebox.jpg">

左へ移動、要素の半分pxマイナスする。

この段階で左右に移動する事を加味し、親要素と自分にpositionをかけておきます。合わせて大きな要素を配置するので付け焼き刃ですが、横スクロールできないよう(overflow-x:hidden;)にしておきましょう。また子要素にもrelativeを記述する事で、IE6で起こるネガティブマージンが効かない問題を回避できます。

body,html{
	position: relative;
	width:100%;
	overflow-x:hidden;
}
#center{
	position: relative;
	margin-left:-1500px;/* 画像の横は3000px */
}

右へ移動、ウィンドウの半分(50%)移動する

最後にウィンドウ幅の半分右に移動します。これで完成です。

body,html{
	position: relative;
	width:100%;
	overflow-x:hidden;
}
#center{
	position: relative;
	margin-left:-1500px;/* 画像の横は3000px */
	left: 50%;
}

要素のセンター揃え（縦横方向）

ちなみに縦方向にそろえる手順も上と同じです。コードは以下のようになります。

body,html{
	position: relative;
	width:100%;
	overflow-x:hidden;
}
#center{
	position: relative;
	margin-left:-1500px;/* 画像の横は3000px */
	margin-top:-200px;/* 画像の縦は400px */
	left: 50%;
	top: 50%;
}

以上になります。