Warum zentrieren „margin-left: auto' und „margin-right: auto' ein Element nicht mit „position: absolute'?

Zentrieren eines Elements mit CSS: Absolute Positionierung vs. relative Positionierung

Beim Versuch, ein Element mit CSS zu zentrieren, kann ein Problem auftreten wobei margin-left: auto und margin-right: auto mit position: absolute unwirksam zu sein scheinen. Diese Ränder funktionieren jedoch, wenn „position: relative“ angewendet wird.

Dieser Unterschied ergibt sich aus der Art und Weise, wie „position: absolute“ ein Element aus dem normalen Dokumentfluss entfernt und es entsprechend den bereitgestellten Koordinaten platziert. In diesem Zusammenhang hat das Festlegen von Rändern auf „Auto“ keine Auswirkung, da es kein „übergeordnetes“ Element gibt, zu dem die Ränder relativ berechnet werden könnten.

Andererseits behält position: relative die Position des Elements innerhalb des normalen Seitenflusses bei . Daher können „margin-left: auto“ und „margin-right: auto“ verwendet werden, um das Element relativ zu seinem enthaltenden Element zu zentrieren.

Um ein Element mithilfe der absoluten Positionierung horizontal zu zentrieren, können Sie die Breite des Elements festlegen und es positionieren Bewegen Sie es mithilfe der Links- und Rechts-Tasten an den linken und rechten Rand des übergeordneten Containers und legen Sie die obere und untere Position fest, um das Element vertikal zu zentrieren.

Das obige ist der detaillierte Inhalt vonWarum zentrieren „margin-left: auto' und „margin-right: auto' ein Element nicht mit „position: absolute'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!