CSS `margin: auto` はどのようにして要素を中央に配置しますか?

CSS マージンの「自動」の魔法

CSS マージンが要素の周囲のスペースを決定することは周知の事実です。しかし、値として「auto」を使用するとどうなるでしょうか?

「Auto」の役割を理解する

margin の 2 番目のパラメータに「auto」を適用すると、次のことが可能になります。ブラウザは、左右のマージンを独自に決定する責任を負います。これは、両方のマージンを均等に設定することで実現されます。

例: オブジェクトの中央揃え

幅 100 ピクセルの親コンテナと子要素があるシナリオを考えてみましょう。幅は50pxです。 「margin: 0 auto」を使用すると、ブラウザは残りのスペース (50px) を計算し、それを左右のマージンに均等に分割します。

これにより、次の計算が行われます:

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

その結果、子要素は親コンテナ内の中央に配置されます。

追加注

• 「auto」が機能するために親要素の幅を指定する必要はありません。子オブジェクトの幅のみが必要です。
• 「Auto」は、margin の最初のパラメータに使用することもでき、上マージンと下マージンを均等に設定する必要があることを示します。

以上がCSS `margin: auto` はどのようにして要素を中央に配置しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。