一般的には、DIV を高さを指定して垂直方向と水平方向にセンタリングする方が便利ですが、高さが決まっていない場合は少し面倒です。試してみたところ、標準と互換性のある 2 つの補助 DIV によって絶対センタリングが実現しました。 IEやFFなどのブラウザ。
CSS コード:
#wrapper{高さ:100%;幅:100%;オーバーフロー:非表示;位置:相対}
#wrapper[id]{表示:テーブル;}
#mid{位置: 絶対;上:50%;左:50%}
#mid[id]{表示:テーブルセル;左:0;垂直整列:中央;位置:静的}
#box{位置:相対;上:-50%;左:-50%;z-index:9999;幅:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px Solid #000;text-align:center;padding:5px;}
XHTML コード:
<div id="wrapper">
<div id="ミッド">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>DIV 絶対中心の例</p>
</div>
</div>
</div>
簡単に説明すると、wrapperは外側のレイヤー、midは中間のレイヤー、boxは絶対的な中心のレイヤーです。
FF などの標準ブラウザでは、ラッパー レイヤーのプレゼンテーション モードをテーブルに設定し、中間レイヤーをテーブルセル表示モードに設定できるため、vertical-align:middle を使用して中間レイヤーの絶対的な垂直方向の中央揃えを実現できます。 IE では、top:50% の方法と、後続のボックスで設定された -50% の相対位置が、垂直方向のセンタリングを実現するために使用されます。水平方向のセンタリングの方法も異なります。FF ではマージンを設定するだけでそれを実現できますが、IE では左端を相互にオフセットするように設定することもできます。
また、#box[id] のような式は FF などの標準ブラウザでのみ認識されるため、ここで FF などのブラウザに属するスタイルを設定できます。
ボックスの高さは設定されていないため、デフォルトは可変高さの自動であり、可変幅についても同様です。