suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich ein Div-Element nur mit CSS perfekt auf dem Bildschirm zentrieren?

Wie kann ich ein Div-Element nur mit CSS perfekt auf dem Bildschirm zentrieren?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-05 18:29:12929Durchsuche

How Can I Perfectly Center a Div Element on the Screen Using Only CSS?

Positionierung

Element perfekt im Screen Center mit reinem CSS

In diesem Artikel befassen wir uns mit der häufigen Herausforderung der Zentrierung eines

(oder )-Element unabhängig von der Bildschirmgröße. Ziel ist es, den verbleibenden Raum gleichmäßig auf alle Seiten zu verteilen. So geht's:

Absolute Positionierung verwenden

Wenn das Element eine feste Breite und Höhe hat, ist die absolute Positionierung der einfachste Ansatz:

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

In diesem Fall:

  • position: absolute nimmt das Element aus dem normalen Dokument Fluss.
  • oben: 50 % legt die obere Position des Elements auf die Mitte des Ansichtsfensters fest.
  • links: 50 % legt die linke Position des Elements auf die Mitte des Ansichtsfensters fest.
  • margin-top: -50px und margin-left: -50px werden verwendet, um seine Position innerhalb des anzupassen Ansichtsfenster.

Hinweis: Vermeiden Sie immer Inline-Stile, da diese zu Wartungsproblemen führen und die Wiederverwendbarkeit von Code beeinträchtigen können.

Hier ist ein funktionierendes Beispiel für JSFiddle: http:/ /jsfiddle.net/S5bKq/.

Indem Sie diese Schritte befolgen, können Sie jedes

effektiv zentrieren. oder Element auf einer Webseite, unabhängig von der Bildschirmgröße, um ein optisch ansprechendes Layout zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div-Element nur mit CSS perfekt auf dem Bildschirm zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css using this position margin viewport table http
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS Grid vs. Flexbox: Was eignet sich am besten zum Erstellen responsiver Quadrate?Nächster Artikel：CSS Grid vs. Flexbox: Was eignet sich am besten zum Erstellen responsiver Quadrate?

In Verbindung stehende Artikel

Mehr sehen