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

Zentrieren positionierter Elemente: Jenseits von „margin: auto“

In CSS kann das Zentrieren eines Elements mithilfe der Eigenschaft „margin: auto“ schwierig sein, wenn Umgang mit Elementen, die absolut oder fest positioniert sind. Um dieses Verhalten zu verstehen, müssen wir uns mit der CSS-Spezifikation befassen.

Zentrierung von In-Flow-Elementen

Für In-Flow-Elemente (ohne absolute oder feste Positionierung) Wenn Sie sowohl margin-left als auch margin-right auf auto setzen, wird eine horizontale Zentrierung relativ zum enthaltenden Block erreicht. Dies funktioniert, weil die CSS-Spezifikation vorschreibt, dass beide Ränder gleich sein müssen, wenn sie auf „Auto“ eingestellt sind, was dazu führt, dass das Element zentriert wird.

Absolute und feste Elementzentrierung

Bei absoluten oder festen Elementen ist die Situation jedoch anders. In der CSS-Spezifikation heißt es:

• Wenn alle drei Werte links, Breite und rechts automatisch sind, werden die Werte für Rand links und Rand rechts auf 0 gesetzt, wodurch eine automatische Zentrierung verhindert wird.
• Wenn links, Breite oder rechts nicht automatisch sind, werden die automatischen Werte der anderen beiden Eigenschaften auf 0 gesetzt und die verbleibenden Ränder werden gleichermaßen berechnet. Dies führt zu einer Zentrierung.
• Wenn keine der drei Eigenschaften automatisch ist, werden margin-left und margin-right wieder auf 0 gesetzt und es gelten bestimmte Regeln, um die Position des Elements anzupassen.

Links und Rechts auf Null setzen

Um ein absolutes oder festes Element mit margin: auto zu zentrieren, müssen Sie auch links und rechts auf 0 setzen. Dadurch wird der Browser zur Berechnung gezwungen margin-left und margin-right gleichermaßen, was zu einer horizontalen Zentrierung führt.

Wenn Sie jedoch einen anderen Wert für links oder rechts angeben, erfolgt die Zentrierung nicht, es sei denn, Sie legen auch die Breite fest. Das Weglassen einer dieser Eigenschaften führt zu einem nicht zentrierten Element.

Beispiel aus der Praxis

Bedenken Sie den folgenden Code:

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

In diesem Beispiel stellt die Einstellung left: 0 und right: 0 sicher, dass das div immer bündig mit dem linken und rechten Rand der Box abschließt. Die Eigenschaft „margin: auto“ zentriert das Div dann horizontal innerhalb der Box.

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