‘CSS’ カテゴリーのアーカイブ

cssで高さ未指定のボックスを上下中央にする

2008 年 4 月 20 日 日曜日

某ミクシで質問が上がってたのでちょっと考えてみた。
まぁ、要するにテーブルのvertical-align: middle;みたいなのが出来れば便利なんだが、ってことで。

Firefox、opera、Safariなんかはdisplay: table;が使えるので、それを使えば解決。
問題はIE。
例によって、IE6、7ともにdisplay: table;が使えない。
IE8では使えるらしいですね。
んで、変わりにIEではexpressionが使えるので、
あんま使いたくないけど、これでボックスの高さを取得してやって、
position:absolute;で固定する王道パターンで中央寄せにする。
expressionってあんま資料とかなくて困る。

こんな感じのHTMLに

<div class=”box”>
<div id=”inner_box”>
<p>hoge</p>
</div>
</div>

CSSをこんな感じで設定。

*{ margin:0; padding:0;}
html { height: 100%;}
body {
height: 100%;
width: 100%;
display: table;
text-align: center;
}

div.box{
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
text-align: center;
}
div#inner_box{
background: #CCCCFF;
width: 500px;
margin: auto;
}

/* IE6用 */
*html div#inner_box {
position:absolute;
height: expression( document.getElementById(“inner_box”).offsetHeight+”px”);
top: 50%;
left: 50%;
margin-top: expression( “-”+document.getElementById(“inner_box”).offsetHeight/2+”px”);
margin-left: -250px;

}
/* IE7用 */
*:first-child+html div#inner_box {
position:absolute;
height: expression( this.clientHeight+”px”);
top: 50%;
left: 50%;
margin-top: expression( “-”+this.clientHeight/2+”px”);
margin-left: -250px;
}

IE6と7ではheightの取得方法が違うのが面倒だな。

サンプル