Wie zentriere ich ein „position:fixed'-Element mit dynamischen Bemaßungen?

Zentrieren eines Positioned:fixed-Elements mit dynamischen Abmessungen

Bei Verwendung von position:fixed zum Erstellen eines Popup-Felds, das auf dem Bildschirm zentriert sein sollte , kann die horizontale und vertikale Zentrierung eine Herausforderung darstellen. Dies liegt daran, dass margin:5% auto; Richtet das Element nur horizontal aus.

Um die gewünschte Ausrichtung zu erreichen, können die folgenden Strategien angewendet werden:

Methode 1: Bekannte Breite und Höhe

Wenn die Breite und Höhe des Div bekannt sind, können die Eigenschaften „oben“ und „links“ auf 50 % festgelegt werden. Darüber hinaus sollten „Margin-Top“ und „Margin-Left“ auf die negative Hälfte der jeweiligen Div-Abmessungen eingestellt werden, um die Mitte zur Mitte hin zu verschieben.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

Methode 2: Dynamische Breite und Höhe

Wenn die Dimensionen des Div dynamisch sind, kann die Transformationseigenschaft anstelle von Rändern verwendet werden. Die Transformation wird auf die negative Hälfte der relativen Breite und Höhe des Divs eingestellt.

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

Methode 3: Feste Breite und unbestimmte vertikale Ausrichtung

Wenn die Breite des Divs fest ist und die vertikale Ausrichtung nicht kritisch ist, können left:0 und right:0 zusammen mit margin-left und margin-right zum Element hinzugefügt werden auto.

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

Durch die Implementierung dieser Methoden können Sie ein position:fixed-Element mit dynamischen Abmessungen auf dem Bildschirm zentrieren und so sicherstellen, dass es unabhängig von der Größe des Ansichtsfensters fixiert bleibt.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein „position:fixed'-Element mit dynamischen Bemaßungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!