Detaillierte Übersicht über die Vor- und Nachteile der CSS-Technologie zur absoluten Positionierung und Zentrierung

Absolute Centering Technology

Wir verwenden oft margin:0 auto, um eine horizontale Zentrierung zu erreichen, haben aber immer gedacht, dass margin:auto keine vertikale Zentrierung erreichen kann ... Eigentlich, um eine vertikale Zentrierung zu erreichen Bei der Zentrierung müssen Sie nur die Elementhöhe und das folgende CSS angeben:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Vorteile:

1. Unterstützt browserübergreifend, einschließlich IE8-IE10.

2. Es sind keine weiteren speziellen Tags erforderlich und die Menge an CSS-Code ist gering

3 Unterstützt prozentuale %-Attributwerte und Min-/Max-Attribute

4 Erzielen Sie die Zentrierung eines beliebigen Inhaltsblocks

5. Der Inhaltsblock kann unabhängig davon zentriert werden, ob Padding eingestellt ist (ohne Verwendung des Box-Sizing-Attributs)

6.

7. Unterstützt perfekt die Bildzentrierung.

Nachteile:

1. Die Höhe muss deklariert werden (siehe Variable Höhe).

2. Es wird empfohlen, overflow:auto festzulegen, um zu verhindern, dass Inhalte außerhalb der Grenzen überlaufen. (Siehe Überlauf).

3. Funktioniert nicht auf Windows Phone-Geräten.

Browserkompatibilität:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Die absolute Positionierungsmethode funktioniert in der neuesten Version von Chrome, Firefox, Safari, Mobil Der Test wurde auf Safari, IE8-10 bestanden.

Vergleichstabelle:

Die absolute Zentrierungsmethode ist nicht die einzige Implementierungsmethode. Es gibt andere Methoden, um eine vertikale Zentrierung zu erreichen, und jede hat ihre eigenen Vorteile. Welche Technologie zum Einsatz kommt, hängt davon ab, ob Ihr Browser diese unterstützt und welche Sprach-Tags Sie verwenden. Diese Vergleichstabelle hilft Ihnen dabei, die richtige Wahl basierend auf Ihren Anforderungen zu treffen.

Technik	Browser-Unterstützung	Responsive	Überlauf	Größe ändern:beide	Variable Höhe	Wichtige Vorbehalte
Absolute Zentrierung	Modern & IE8+	Ja	Scrollen, kann Behälter überlaufen	Ja	Ja*	Variable Höhe nicht perfekt browserübergreifend
Negative Ränder	Alle	Nein	Scrollen	Ändert die Größe, bleibt aber nicht zentriert	Nein	Reagiert nicht, Margen müssen manuell berechnet werden
Transformationen	Modern & IE9+	Ja	Scrollen, kann Behälter überlaufen	Ja	Ja	Unscharfes Rendering
Tabellenzelle	Modern & IE8+	Ja	Erweitert Container	Nein	Ja	Extra-Aufschlag
Inline-Block	Modern, IE8+ & IE7*	Ja	Erweitert Container	Nein	Ja	Benötigt Container, Hacky-Styles
Flexbox	Modern & IE10+	Ja	Scrollen, kann Überlaufbehälter	Ja	Ja	Erfordert Container, Herstellerpräfixe

解释：

通过以上描述，绝对居中（AbsoluteCentering ）的工作机理可以阐述如下:

1、在普通内容流（normaler Inhaltsfluss）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

W3C中写道Wenn „margin-top“ oder „margin-bottom“ „auto“ sind, ist ihr verwendeter Wert 0.

2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染.

Developer.mozilla.org:...ein Element, das absolut positioniert ist, wird aus dem Fluss genommen und nimmt somit Platz up kein Leerzeichen

3、为块区域设置top: 0; links: 0; unten: 0; rechts: 0;为body或者声明为position:relative;的容器.

Developer.mozilla.org:Für absolut positionierte Elemente geben die Eigenschaften „oben“, „rechts“, „unten“ und „links“ Versätze an vom Rand des enthaltenden Blocks des Elements (wozu das Element relativ positioniert ist).

4、 空间,促使浏览器根据新的边界框重新计算margin:auto

Developer.mozilla.org: Der Rand des [absolut positionierten] Elements wird dann innerhalb dieser Offsets positioniert.

5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中.

W3.org: Wenn keiner der drei [oben, unten, Höhe] sind „auto“: Wenn sowohl „margin-top“ als auch „margin-bottom“ „auto“ sind, lösen Sie das Problem Gleichung unter der zusätzlichen Einschränkung, dass die beiden Ränder gleiche Werte erhalten. AKA: Zentrieren Sie den Block vertikal Zentrierung)应该都兼容符合标准的现代浏览器.

简而言之（TL;DR）：绝对定位元素不在普通内容流中渲染, 因此margin:auto可以使内容在通过top: 0 ; links: 0; unten: 0;rechts: 0;设置的边界内垂直居中.

Das obige ist der detaillierte Inhalt vonDetaillierte Übersicht über die Vor- und Nachteile der CSS-Technologie zur absoluten Positionierung und Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!