「マージン: 自動」で要素が垂直方向に中央揃えにならないのはなぜですか?

「margin: Auto」で要素を垂直方向に中央揃えにする

「margin: auto」は要素を水平方向に効果的に中央揃えにしますが、その垂直方向の配置機能は限定。これは、ブロック ボックスが垂直に積み重ねられる方法とマージンが崩れる可能性があるためです。

CSS2.1 セクション 10.6.2 によると、ブロック ボックスは通常の流れで上から下に積み重ねられます。特定の状況では、垂直方向のマージンが崩れてゼロになる場合があります。包含ブロックに自動高さがあり、ブロック ボックスが 1 つだけある場合、その上下のマージンは本質的にゼロです。

同じフロー内の複数のブロック ボックス、またはインフローに影響を与えるフロー外ボックスの場合レイアウトに応じて、自動マージンの解決がより複雑になります。これはインライン要素と浮動小数点数にも拡張され、ライン ボックスとの干渉を避けるために自動の左右のマージンがゼロに設定されます。

対照的に、絶対配置されたボックスは、同じ配置コンテキスト内の他のボックスを認識しません。したがって、自動上下マージンは、それらを含むブロックのみに基づいて計算できます。

Flexbox は、フレックス フォーマット コンテキスト内で相互に完全に認識しているフレックス アイテムに対する独自のソリューションを提供します。フレックスボックスの垂直マージンは明確なルールに従い、要素の配置をより正確に制御できます。

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