高さが不明な垂直方向のセンタリングの問題を CSS で解決_CSS/HTML

別段の指定がない限り、このサイトのコンテンツは 共有許可 を使用して作成されており、非営利目的で使用されます。あなたの労力の成果を尊重してください。

元のタイトル: CSS での垂直センタリング

サブタイトル: 身長不明のユフの決定的解決策

翻訳: フォレストガン

CSS には垂直方向の整列機能がありますが、高さが不明な垂直方向の中央揃えの問題 (DIV タグ内に高さが不明なテキストまたは画像がある場合) を効果的に解決することはできません。

Mozilla、Opera、Safari などの標準ブラウザの場合、親要素の表示モードを TABLE (display: table;) に設定し、内部の子要素を table-cell (display: table-cell) に設定できます。 ) 垂直整列機能により垂直方向の中央揃えになりますが、標準以外のブラウザではサポートされません。

標準以外のブラウザでは、子要素を上から 50% に設定し、その中に上から -50% の距離で要素を配置してオフセットすることしかできません。

CSS
body {パディング: 0; マージン: 0;}
body,html{高さ: 100%;}
#outer {高さ: 100%; 位置: 相対; width: 100%; background:ivory;}
#outer[id] {display: table;position: static;}
#middle {position: 絶対; 50%;} /* エクスプローラーのみ* /
#middle[id] {表示: テーブルセル; 垂直方向の配置: 中央; 位置: 静的;}
#inner {位置: 相対; 幅: 400px; マージン: 0 auto;} /* エクスプローラーのみ */
div.greenBorder {border: 1px 無地の緑;}

XHTML

上記の CSS コードの利点は、ハッキングがなく、IE でサポートされていない CSS2 セレクター #value[id] を使用していることです。

CSS2 セレクター #value[id] はセレクター #value と同等ですが、Internet Explorer はこのタイプのセレクターをサポートしていません。同様に、.value[class] は、標準ブラウザでのみ読み取ることができる .value と同等です。

テスト: Firefox1.5、Opera9.0、IE6.0、IE5.0 に合格しました。