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

Beim Versuch, ein Element mithilfe von 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 der Ränder auf „Auto“ keine Auswirkung, da es kein „übergeordnetes“ Element gibt, zu dem die Ränder relativ zu 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 mit „Links“ und „Rechts“ an den linken und rechten Rand des übergeordneten Containers verschieben und die obere und untere Position festlegen, um das Element vertikal zu zentrieren.