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

Zentrierung absolut positionierter Elemente mit automatischen Rändern fehlgeschlagen

Beim Versuch, ein absolut auf der Seite positioniertes Element mithilfe automatischer Ränder zu zentrieren, wird das erwartet Verhalten kann nicht auftreten. Insbesondere wird das Element nicht zentriert, wenn sowohl „marge-left“ als auch „marge-right“ auf „Auto“ gesetzt wird, obwohl diese Technik für ein relativ positioniertes Element funktioniert.

Diese Diskrepanz entsteht, weil absolut positionierte Elemente aus ihrem regulären Fluss genommen werden im Layout des Dokuments. In dieser losgelösten Position gilt das automatische Verhalten der Ränder, das Element an seinem Container auszurichten, nicht mehr.

Lösung

Um ein Element mit absoluter Positionierung korrekt zu zentrieren, an Es sollte ein alternativer Ansatz gewählt werden. Hier sind einige Optionen:

• Feste Breite und zentriert:Feste Breite festlegen und links anwenden: 50 %; transform: Translate(-50%, 0); zentriert das Element horizontal.
• Enthaltendes übergeordnetes Element: Platzieren Sie das Element innerhalb eines übergeordneten Elements und zentrieren Sie es mit text-align: center.
• Flexbox: Verwenden Sie das Flexbox-Layout, um das Element innerhalb seines Containers horizontal auszurichten.

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