センタリング実験

ブロック要素を画面の中央に配置する / CSSの場合

基本的な内容として、横800px×縦600pxのブロック要素を画面の中央に持ってくる場合。

CSSを使用して行う場合は、まず「position:absolute;」で任意のブロック要素配置を上から50% 左から50%の位置(右下)にずらす。

そして今度はずらしたブロック要素の縦横サイズのそれぞれ半分の数値を上と左にマイナス値として設定する。

一応これで完成。

CSS

#container {
	height:600px;
	width:800px;
	position:absolute;
	top: 50%;
	left:50%;
	margin-top: -300px;
	margin-left: -400px;
}

ただ一つ困るのが、ブラウザウインドウをセンタリングしているブロック要素より小さくした場合。

上と左のmarginをマイナス値にしていることから、スクロールバーが出ても隠れてしまった上と左は完全に表示されなくなってしまう。