Wie zentriere ich ein Div mit fester Position mithilfe von CSS?

Ein Div mit fester Position zentrieren

Wenn Sie mit Divs mit fester Position arbeiten, kann es eine Herausforderung sein, sie in der Mitte der Seite auszurichten. Der traditionelle „Hack“, der für absolut positionierte Elemente verwendet wird, gilt nicht. Stattdessen wird die äußerste linke Ecke des Divs bei 50 % platziert und margin-left ignoriert.

Lösung mit CSS3-Transformation

Die Lösung liegt in der Verwendung der CSS3-Transformationseigenschaft:

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Diese Methode verwendet die Transformationseigenschaft, um das Element um die Hälfte seiner Breite nach links zu verschieben und es so effektiv auf dem zu zentrieren Seite.

Bonus: Absolut positionierte Elemente zentrieren

Für absolut positionierte Elemente ist die Verwendung von CSS3 Flexbox eine bessere Methode als der „Rand-Links“-„Hack“:

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

Dadurch wird der Inhalt des absolut positionierten Elements an dem ausgerichtet zentriert.

Beispiel

Hier ist ein Beispiel, um den Unterschied zu demonstrieren:

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

Das „fast zentrierte“ Div verwendet den Rand-Links-„Hack“, während das „centered“ div verwendet die CSS3-Transformationseigenschaft. Wie Sie sehen können, ist das „zentrierte“ Div genau in der Mitte positioniert.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div mit fester Position mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!