Grundlegendes zum Thema „Absolute Positioning Margin Auto“

Beim Anwenden von „position: absolute“ auf ein Element mit „margin-left: auto“ und „ margin-right: auto“ bemerken Sie möglicherweise, dass die Ränder scheinbar keine Wirkung haben. Dieses Verhalten unterscheidet sich von „position: relative“, wo die Ränder wie erwartet funktionieren. Um diese Diskrepanz zu verstehen, lassen Sie uns tiefer in die zugrunde liegende Mechanik eintauchen.

Wenn ein Element absolut positioniert ist, wird es aus dem normalen Fluss des Dokuments entfernt. Dies bedeutet, dass es nicht mehr mit seinen Nachbarelementen interagiert und seine Größe ausschließlich durch seine expliziten Abmessungen oder durch die Größe seines Containers bestimmt wird. Wenn die Breite des Elements nicht explizit festgelegt ist, ist der vom Browser berechnete Wert daher „auto“, was in den meisten Fällen 0 ist.

In diesem Szenario wird „margin-left: auto“ und angewendet „margin-right: auto“ versucht, Platz um das Element herum zu schaffen, indem der linke und rechte Rand auf die halbe Breite des Elements eingestellt werden. Da jedoch die berechnete Breite des Elements 0 ist, wird auch der berechnete Randwert zu 0. Aus diesem Grund scheinen die Ränder keine Auswirkung zu haben.

Im Gegensatz dazu bleibt das Element bestehen, wenn „position: relativ“ verwendet wird im normalen Fluss des Dokuments. Seine Größe wird durch seinen Inhalt und den Platz bestimmt, den es innerhalb des Flusses einnimmt. Wenn „margin-left: auto“ und „margin-right: auto“ angewendet werden, werden die Ränder basierend auf der tatsächlichen Breite des Elements berechnet, die in diesem Fall ungleich Null ist. Daher werden die Ränder korrekt angewendet, was dazu führt, dass das Element innerhalb seines enthaltenden Elements zentriert wird.

Um ein absolut positioniertes Element zu zentrieren, können Sie seine Breite und Höhe angeben und dann „position: absolut; links: 50“ verwenden %; transform: Translate(-50%, -50%);" um es in seinem Behälter zu zentrieren. Diese Methode positioniert das Element genau an der gewünschten Stelle, auch wenn die Ränder auf „Auto“ eingestellt sind.