Warum zentriert „Rand: Auto' positionierte Elemente nicht immer?

Margin:auto reicht nicht aus, um positionierte Elemente zu zentrieren

Beim Versuch, ein absolut oder fest positioniertes Element horizontal zu zentrieren, wird die Eigenschaft margin:auto verwendet allein reicht möglicherweise nicht aus.

Für In-Flow-Elemente (Elemente ohne Position: absolut oder fest) reicht es aus, nur die Breite festzulegen. Rand: Automatisch gleicht den linken und rechten Rand automatisch aus, um das Element zu zentrieren.

Bei positionierten Elementen ist die Situation jedoch anders. Gemäß der CSS-Spezifikation:

• Wenn links, rechts und die Breite alle automatisch sind, werden margin-left und margin-right auf 0 gesetzt, was zu keiner Zentrierung führt.
• If left, right und width sind nicht alle automatisch, margin-left und margin-right werden auf gleiche Werte gesetzt, was zu einer Zentrierung führt.

So zentrieren Sie ein positioniertes Element:

1. Links, rechts und Breite einstellen

position: absolute;
left: 0;
right: 0;
width: 70px;

2. Setzen Sie margin-left und margin-right auf auto (optional)

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

Das Setzen von left und right auf 0 definiert im Wesentlichen die linken und rechten Grenzen, innerhalb derer sich das Element bewegen kann. Margin: auto gleicht dann den Abstand zwischen diesen Grenzen aus.

Beispiel:

Betrachten Sie ein übergeordnetes Element mit einer Breite von 200 Pixel und ein absolut positioniertes untergeordnetes Element mit einer Breite von 70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

Wenn margin: auto verwendet wird, wird das untergeordnete Element horizontal in Bezug auf das übergeordnete Element zentriert. Dies liegt daran, dass die berechneten Ränder (Rand links und Rand rechts) gleich sind, wodurch das Kind effektiv in der Mitte des verfügbaren Platzes positioniert wird.

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