Wie zentriere ich zwei Elemente innerhalb eines Div vertikal?

So zentrieren Sie zwei Elemente in einem Div vertikal

Um zwei Elemente innerhalb eines Divs vertikal auszurichten, können Sie eine der folgenden Methoden verwenden :

1. CSS-Flexbox-Methode

Diese Methode beinhaltet die Verwendung der Flexbox-Eigenschaft, um die Flexrichtung, Ausrichtung und Ausrichtung der Elemente festzulegen.

CSS-Code:

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Dieser Code erstellt einen flexiblen Container, der die Elemente vertikal stapelt und sie sowohl horizontal als auch vertikal zentriert.

2. CSS-Tabellen- und Positionierungsmethode

Diese Methode verwendet die Eigenschaften display:table und Vertical-align:Middle, um die Elemente vertikal innerhalb des div auszurichten.

CSS-Code:

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

Dieser Code sorgt dafür, dass sich das Body-Element wie eine Tabelle verhält und das #container-Div als Tabellenzelle positioniert und vertikal ausgerichtet wird Mitte.

Empfehlung

Flexbox wird aufgrund seines modernen Ansatzes, seiner Flexibilität und Benutzerfreundlichkeit im Allgemeinen gegenüber der Tisch- und Positionierungsmethode empfohlen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich zwei Elemente innerhalb eines Div vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!