HTMLを上下中央、上下左右中央に配置する。

2012.06.06 Wed

HTMLを上下中央にしたり、上下左右中央に配置したサイトは最近あんまり見ない気がしますが、フルFlashのサイトが少しずつ減っているところを見ると、そういうレイアウトのサイトが増える可能性もないとも言えません。ということでまとめてみました。

1.HTMLを上下中央に配置する。

下記のようにHTMLとCSSを記述することによってコンテンツを上下中央に配置することができます。コンテンツの高さ(今回は600px)に対して、その半分の高さ(今回は300px)のネガティブマージンをかけているのがポイントです。

<div id="container"></div>

html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#container {
background: #ccffcc;
width: 100%;
height: 600px;
position: absolute;
top: 50%;
left: 0;
margin: -300px 0 0;
}

2.HTMLを上下左右中央に配置する。

先ほどの上下中央に配置したコンテンツを中央揃えにすることによって、上下左右中央に配置することができます。

<div id="container">
  <div id="container_inner"></div>
</div>

html {
height: 100%;
}body {
height: 100%;
position: relative;
}
#container {
width: 100%;
height: 600px;
position: absolute;
top: 50%;
left: 0;
margin: -300px 0 0;
}
#container_inner {
background: #ccffcc;
width: 960px;
height: 600px;
margin: 0 auto;
}

以上の2つを組み合わせることによって、メインコンテンツ部分は上下中央の配置にしてフッター部分は上下左右中央の配置にするということもできます。

この方法はIE6、IE7を含むほとんどのブラウザで使用することができますが、コンテンツの高さを指定しているので、コンテンツの中身をすべて画像にしたり、コンテンツ内でスクロールができるようにしたりするなど、高さが超えないように何らかの工夫が必要になります。


no comments

leave a comment




comment