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

ソースはシンプルで、かつ、難しいことは一切していません。
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%;
}
コメント