テーブルを使わないでスタイルシートだけで中央にコンテンツを表示する方法

Posted by kumacchi on 2008年7月19日 , 1 Comment

スタイルシートだけで中央にコンテンツを表示する方法を調べていたらやっと見つかったので、メモ＆実際のサンプルです。

検索してみると、同じような問題で困っている人がそれなりにいるようですが、的外れな回答が多いのと、スタイルシートだけでは出来ないとか、テーブルを使えとか、javascriptならできるとかいろいろな回答がありますが、肝心の答えがなかなか見つからないのが困り物です。(；´Д｀)

最初は
margin-top:auto;
margin-bottom:auto;
で上手くいかないのかなｰと思ってやってみたけどダメで、色々検索してみてtableを使うしかないと思ってあきらめかけて実際にテーブルで作ってみたのですが、やっぱりあきらめきれなくて気合入れて探してみたら見つかりました。

参考にしたページ
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=866

自力でも、marginを使ってみたりpositionとtopやleft等を使って何とかできないかといろいろやるところまではたどり着くと思いますが、実際には両方を組み合わせて使うことによって中央に表示するのを実現します。

positionはrelativeでもabsoluteでも構いませんが用途に応じて使い分けてください。

position:absoluteでleft:50%にtopを50%に指定してみたり25%にしてみたりしても実際には上手く行かない事に気付きます。この50%というのはbodyの高さと幅の50%の位置なのでそこから表示しても表示位置が下過ぎ右過ぎです。失敗サンプル

ここまでは僕でも思いついたのですが、ここからどうやってオフセットかまして位置をずらすのかが考え付きませんでした。

ここでmarginを使って位置をずらしてあげます。

真中に表示したいboxの幅は400pxで高さは300pxです。真中に表示する為には-200px、-150pxしてあげればいいわけです。

負の値を指定できるとは知りませんでしたｗ。

そういうわけで上の失敗サンプルに

margin-top:-150px;
margin-left:-200px;

を追加してあげるわけです。

実際のソースとサンプルは下のとおりです。

index.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta
http-equiv=”Content-Language”
content=”ja”>
<title>peuplier</title>
<link
href=”style.css” rel=”stylesheet”
type=”text/css”>
</head>
<body>
ページの中央に表示するサンプルです。
<a
href=”/”>KUMA TYPE TOPに戻る</a>
<div
id=”box”>
テーブルを使わないでスタイルシートで縦横中央（真中）に表示する方法。のサンプル
</div>
</body>
</html>

style.css

html{
height:100%;
}
body{
height:100%;
}

#box{
/* position:relative;*/
position:absolute;
border:1px
solid
black;
top:50%;
left:50%;
width:400px;
height:300px;
margin-left:
-200px;
margin-top: -150px;
}