ブロック要素を横方向にセンタリング

ブロック要素をCSSで縦横共にセンタリングしたいです。
横方向のセンタリングはできたのですが、縦方向のやり方がわかりません。
縦方向をセンタリングするにはどのような記述をすれば良いのでしょうか？
アドバイスお願いいたします。

No.4 ベストアンサー 回答者： steel_gray 回答日時： 2005/11/06 14:40

一応、以下のように。

#outerBox {
width:幅;height:高さ;
display:table-cell;/* ※1 */
vertical-align:middle;
}
#innerBox{
width:幅;height:高さ;
margin-left:auto;
margin-right:auto;
}

<div id="outerBox">
<div id="innerBox">
</div>
</div>

※1 display:table-cell はIEが対応していないので、一般的には実際にテーブルにするしかないのが現状です。

参考URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=1754808

この回答へのお礼

ありがとうございます。
ブラウザによって対応してたりしてなかったりと結構厄介ですね…
今回はテーブルを使用する事にしました。

お礼日時：2005/11/11 14:30

No.3 回答者： taba 回答日時： 2005/11/05 14:10

#1の方の書かれているように、縦のセンタリングはvertical-alignを使いますが、これを適用できるのはテーブルのセル要素か、インライン要素に限られます。

従って、ブロック要素をセンタリングしたい場合には、外をテーブルで囲み、該当するブロック要素の外のtdにvertical-align: middle;を設定するしかありません。
もっともその外枠自体の縦を画面一杯にするのがブラウザによっては難しいので、適用できるシーンは限られますね。それにデザインのためにテーブルを使うことになり、CSSの使い方としては邪道かも知れません。

この回答へのお礼

ありがとうございます。
テーブルを使用しないと無理なのですね…
今回は諦めてテーブルを使用しました。

お礼日時：2005/11/11 14:28

No.2 回答者： cyokokichi 回答日時： 2005/11/05 07:52

line-heightをheightに合わせるではダメですか？

それともブロック要素をブロック要素の中でセンタリングなら親ブロック要素のheightをautoにして単純にmarginでできるとおもいますが・・・

参考URL：http://www3.tokai.or.jp/janboon/csstest.htm

この回答へのお礼

ありがとうございます。
line-heightをheightに合わせるというのは試してませんでした。
やってみます。

お礼日時：2005/11/11 14:26

No.1 回答者： sr-agent 回答日時： 2005/11/04 23:17

{ vertical-align: middle }

ではダメでしょうか？
参考にならなかったらスミマセン。

この回答へのお礼

ありがとうございます。
vertical-align: middleは最初に試したのですが、
残念ながらうまくいきませんでした…

お礼日時：2005/11/11 14:23