Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich ein Div mithilfe von CSS vertikal innerhalb seines übergeordneten Elements?

Wie zentriere ich ein Div mithilfe von CSS vertikal innerhalb seines übergeordneten Elements?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-11 01:38:10470Durchsuche

How to Vertically Center a Div Within Its Parent Using CSS?

Vertikales Zentrieren eines

Innerhalb seines übergeordneten Elements mithilfe von CSS

In dieser Abfrage sucht der Benutzer nach Hilfe bei der vertikalen Ausrichtung der Divs „Benutzername“ und „Formular“ innerhalb des übergeordneten Divs „Login“. Sie haben versucht, die Funktion „vertical-align: middle;“ zu verwenden. Eigenschaft ohne Erfolg.

LÖSUNG

Die optimale Lösung für die vertikale Zentrierung von Divs in modernen Browsern ist Flexbox:

#Login {
    display: flex;
    align-items: center;
}

In Fällen, in denen Flexbox unterstützt wird fehlt (z. B. IE 9 und niedriger), ist eine Fallback-Möglichkeit über ältere Methoden vorhanden erforderlich.

ZUSÄTZLICHE RESSOURCEN

  • [Browser-Unterstützung für Flexbox](https://caniuse.com/?search=flexbox)
  • [Ein Leitfaden zu Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
  • [Verwenden von flexiblen CSS-Boxen](https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Flexible_Box_Layout/)

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

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