画面中央に配置する

画面の中央にボックスを配置したいと思ったことはありませんか？今回は左右の余白だけでなく、上下の余白も均等にとる方法です。ミニマムなデザインのページを作るときに役立つでしょう。

テクニック使用後

上下の余白も均等なところに注目してください。

やり方

１：スタイルシートを書く

サンプルのスタイルシートはこんな感じになります。

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;を指定して内容が多くなった場合に備えることも重要です。

ある程度ならウィンドウの大きさを変化させても対応できますが、あまりにも小さくすると、見えないところが出てきます。

一覧へ戻る