画面の中央にボックスを配置したいと思ったことはありませんか？ 今回は左右の余白だけでなく、上下の余白も均等にとる方法です。 ミニマムなデザインのページを作るときに役立つでしょう
body{
background-image:url(../../img/back.gif);
margin:0px;
padding:0px;
}
div#main{
background-image:url(../../img/sub-back.jpg);
overflow:auto;
height:400px;
width:600px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
}
body直下にID：mainのボックスを配置して作っていくとサンプルのようになります。
解説
最初にposition:absolute;とtop:50%;とleft:50%;を使ってmainボックスの基点を 画面中央に持ってきます。
その後margin-top:-200px;とmargin-left:-300px;をつかってmainボックスの高さと幅の半分だけ、 上と左にずらしてあげれば、見事画面中央に配置されます。これが今回のからくりです。
heightとwidthも%で指定したいところですが、%で指定するとレイアウトが崩れてしまいます。 pxで指定してください。あとoverflow:auto;を指定して内容が多くなった場合に備えることも重要です。
ある程度ならウィンドウの大きさを変化させても対応できますが、あまりにも小さくすると、見えないところが出てきます。
