「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?

Margin:auto だけでは配置された要素が中央に配置されない理由

位置を使用して親コンテナ内の div 要素を中央に配置しようとすると、次のようになります。絶対または位置: 固定プロパティ、マージン: 自動を使用するだけでは不十分な場合があります。

CSS 仕様を理解する

CSS 仕様によると、位置を持つ要素の場合:相対または位置: 静的 (通常のフロー)、margin-left と margin-right の両方を自動に設定すると、使用される値が等しくなるため、その要素を含むブロックに対して要素が水平方向に中央揃えになります。ただし、これは、position:Absolute または Position:fixed の要素には適用されません。

left、width、right の 3 つすべてが auto である絶対位置または固定位置の要素の場合、margin-left の使用値が使用されます。中央揃えを防ぐために、margin-right は 0 に設定されます。このような要素を中央に配置するには、左、右、または幅の値を定義する必要があります。

左、右、幅を設定する効果

左、右の場合、と幅がすべて定義されている場合、マージンは同じ値になり、結果として中央揃えになります。これらの値のいずれかを省略すると、要素が中央揃えからずれる原因になります。

さまざまなケースのデモ

次の表は、CSS で説明されているさまざまなケースを示しています。仕様:

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

以上が「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。