CSSのみでボックスをページの真ん中に設置するポジショニング方法[CSS]

SiteCrafting > Blogより、CSSのみでボックスをページの真ん中に設置するポジショニング方法の紹介です。

body0904141.jpg

ソースはシンプルで、かつ、難しいことは一切していません。

positionプロパティでrelativeで指定しているだけです。以下マークアップ例です。

HTML

<div id="wrapper">
        <div id="container">

        </div>
    </div>

CSS

#wrapper, #container {
	height: 500px;
	width: 600px;
}
#wrapper {
	bottom: 50%;
	right: 50%;
	position: absolute;
}
#container {
	left: 50%;
	position: relative;
	top: 50%;
}