Warum zentriert „margin: auto' nicht absolut oder fest positionierte Elemente?

Warum Margin:auto allein positionierte Elemente nicht zentriert

Beim Versuch, ein div-Element innerhalb eines übergeordneten Containers mithilfe der Position zu zentrieren: absolute oder position: feste Eigenschaften, die Verwendung von margin: auto allein reicht möglicherweise nicht aus.

Das CSS verstehen Spezifikation

Gemäß den CSS-Spezifikationen gilt für Elemente mit position: relative oder position: static (normaler Fluss), dass die Einstellung von margin-left und margin-right auf automatische horizontale Zentrierung des Elements relativ zu seinem Inhalt erfolgt Block, da ihre verwendeten Werte gleich werden. Dies gilt jedoch nicht für Elemente mit Position: absolut oder Position: fest.

Für absolut oder fest positionierte Elemente, bei denen alle drei Elemente links, Breite und rechts automatisch sind, werden die Werte von margin-left verwendet und margin-right werden auf 0 gesetzt, um eine Zentrierung zu verhindern. Um solche Elemente zu zentrieren, müssen Werte für links, rechts oder Breite definiert werden.

Die Auswirkung der Einstellung von links, rechts und Breite

Wenn links, rechts, und Breite sind alle definiert, die Ränder erhalten gleiche Werte, was zu einer Zentrierung führt. Wenn Sie einen dieser Werte weglassen, weicht das Element von der Mittelausrichtung ab.

Demonstration mit verschiedenen Fällen

Die folgende Tabelle zeigt die verschiedenen Fälle, wie im CSS beschrieben Spezifikation:

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)

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: auto' nicht absolut oder fest positionierte Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!