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

「margin: auto」を使用して要素を垂直方向に中央揃えにする

問題:

HTML で「margin: auto」を適用する" を要素に追加すると、通常はその要素がコンテナ内で水平方向の中央に配置されます。しかし、垂直方向では同じように動作しないのはなぜですか?

説明:

CSS 仕様 (CSS2.1 のセクション 10.6.2) によると、ブロックレベル要素 (div など) は、自動センタリングなしで上から下に垂直に配置されます。これは、特定の条件下 (親要素の境界線など) で垂直方向のマージンが崩れる可能性があるためです。

自動高さのコンテナ内に自動マージンを持つブロックレベル要素が 1 つだけ存在するシナリオでは、その上部はいずれにせよ、下マージンはゼロになります。ただし、複数のブロックレベル要素またはフロー外ボックス (クリアランスなど) が存在する場合、自動マージンの動作があいまいになり、手動制御が必要になります。

インライン要素とフロート:

インライン要素 (アトミック インラインを含む) と浮動小数点の場合、自動の左右のマージンもゼロに設定されます。これは、インライン レベルのボックスがライン ボックスに沿ってレイアウトされ、フロートが独自のレイアウト ルールに従っているためです。

絶対配置ボックス:

絶対配置では自動マージンの動作が異なります。箱。これらは同じ配置コンテキスト内の他の要素から独立しているため、自動上下マージンを使用して垂直方向の中央に配置できます。

フレックスボックス:

フレックスボックスでは、自動マージンまたしても違う行動をします。 Flex アイテムは、その存在の有無も含めて相互に認識しています。これにより、垂直方向のセンタリングなど、マージンの動作をより正確に制御できるようになります。

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