「margin: auto」が要素を垂直方向に中央揃えにしないのはなぜですか?

「margin: auto」による垂直センタリングの難題

CSS の世界では、「margin: auto」プロパティは人気のあるツールです要素を水平方向に中央揃えにする場合。ただし、垂直方向の位置合わせに関しては、不十分な場合がよくあります。

上記の例から明らかなように、「margin: auto」を指定した青い div は水平方向に簡単に中央に配置されますが、垂直方向は未調整のままです。原因はCSS2.1の仕様(10.6.2節)にあります。

ブロックレイアウトでは要素が縦に積み重なるため、余白が崩れる場合があります。自動高さと枠線付きの親を持つスタンドアロン ブロック ボックスの場合、余白は自然にゼロになります。ただし、複数のブロック ボックスが導入されたり、追加の要素がレイアウトに影響を与える場合 (クリアランスなど)、自動マージンがあいまいになり、さらなる解決が必要になります。

同様に、インライン要素 (アトミック インラインを含む) とフロートは、自動で垂直方向に中央揃えにすることはできません。特定のレイアウト規則による余白。ただし、絶対配置ボックスには、配置コンテキスト内の他の要素の影響を受けないため、そのような制限はありません。一方、Flexbox はレイアウトに対して異なるアプローチを提供し、他のフレックス項目を固有に認識するため、フレックス項目の自動マージンをフレックス コンテナーに対して計算できるようにします。

したがって、" margin: auto」は要素を水平方向に効果的に中央揃えしますが、ブロック レイアウトの複雑さと、複数の要素が関係する場合に生じる曖昧さのため、垂直方向の中央揃えには不十分です。

以上が「margin: auto」が要素を垂直方向に中央揃えにしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。