Wie zentriere ich die absolute CSS-Positionierung? Vier Implementierungsmethoden für die absolute Positionierung und Zentrierung von CSS

Zentrierung wird häufig beim Layouten von CSS auf Webseiten verwendet. Wie kann man also eine Zentrierung mit absoluter CSS-Positionierung erreichen? Im heutigen Artikel erfahren Sie, wie Sie die absolute CSS-Positionierung und -Zentrierung implementieren.

Empfohlenes Handbuch:CSS-Online-Handbuch

Es gibt viele Möglichkeiten, die absolute Positionierung und Zentrierung von CSS zu implementieren. Im Folgenden werde ich Ihnen vorstellen, wie das geht Implementieren Sie die absolute Positionierung und Zentrierung von CSS.

1. Die Verwendung der gängigen CSS-Absolutpositionierung und -Zentrierung mit guter Kompatibilität:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

Hinweis: Diese Methode weist einen offensichtlichen Nachteil auf, nämlich dass die Größe des Elements bekannt sein muss Vorauszahlung. Andernfalls kann die Anpassung negativer Margenwerte nicht korrekt sein. Derzeit wird es häufig mit Hilfe von JS abgerufen.

2. Das Aufkommen von CSS3 hat zu einer besseren Lösung geführt, die darin besteht, Transformation statt Margin zu verwenden. Der prozentuale Wert des Übersetzungsoffsets in Transformation ist relativ zu seiner eigenen Größe und Zentrierung wie folgt:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3. Margin:auto realisiert die Zentrierung absolut positionierter Elemente (0 Positionierung für oben, unten, links und rechts; Rand: auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4 CSS3-Box-Modell: Flex-Layout zur Realisierung der absoluten CSS-Positionierung. Diese Situation kann unabhängig von Browsern niedrigerer Versionen verwendet werden.

Empfohlene verwandte Artikel:
1.So führen Sie eine absolute Positionierung in CSS durch
2.Erläutern Sie die relative Positionierung und die absolute Positionierung in CSS mit Beispielen Verwendung und Unterschied (Bilder und Text)
3.Detaillierte Tabelle der Vor- und Nachteile der CSS-Technologie zur absoluten Positionierung und Zentrierung
Ähnliche Videoempfehlungen:
1.CSS-Video-Tutorial – Jade Girl Heart Sutra Edition

Dieser Artikel endet hier. Weitere Informationen zur Positionierung finden Sie im CSS-Handbuch .

Das obige ist der detaillierte Inhalt vonWie zentriere ich die absolute CSS-Positionierung? Vier Implementierungsmethoden für die absolute Positionierung und Zentrierung von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!