Wie zentriert man ein Element mit fester Position horizontal und vertikal?

So zentrieren Sie ein Position:fixed-Element

Problem:

Zentrieren eines „position:fixed“-Elements Popup-Box horizontal und vertikal mit dynamischer Breite und Höhe, trotz Verwendung von Marge: 5 % automatisch;

Lösung:

Es gibt mehrere Ansätze, um dies zu erreichen:

Ansatz 1: Feste Breite und Höhe

1. Oben und links einstellen 50 %, um die obere linke Ecke des Divs zu zentrieren.
2. Stellen Sie margin-top und margin-left auf die negative Hälfte der Höhe und Breite des Divs ein, um die Mitte zur Mitte hin zu verschieben.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

Ansatz 2: Dynamische Breite und/oder Höhe

1. Verwenden Sie die Transformation Anstelle von „Rand“ setzen Sie ihn auf die negative Hälfte der relativen Breite und Höhe des Div.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Ansatz 3: Feste Breite, aber vertikale Zentrierung ist egal

1. Fügen Sie left: 0 und right: 0 zum Element hinzu, während Sie margin-left und margin-right auf festlegen automatisch.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally */
left: 0;
right: 0;

Das obige ist der detaillierte Inhalt vonWie zentriert man ein Element mit fester Position horizontal und vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!