Wie zentriere ich ein Div mithilfe von CSS vertikal innerhalb seines übergeordneten Elements?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-11 01:38:10

Original

582 Leute haben es durchsucht

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;
}

Nach dem Login kopieren

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!