Zentrieren eines Div vertikal mit CSS

1. Verwenden Sie die Eigenschaften top und transform im Inneren div, um das div mit CSS vertikal zu zentrieren
2. Verwenden Sie die CSS Flexbox, um das div in CSS vertikal zu zentrieren

Dieser Artikel stellt Methoden vor, um ein div in CSS vertikal zu zentrieren.

Verwenden Sie die Eigenschaften top und transform im Inneren div, um das div mit CSS vertikal zu zentrieren

Diese Methode verwendet zwei Container, um zu demonstrieren, wie ein div vertikal zentriert wird.

Zuerst können wir ein äußeres und inneres div erstellen, wobei wir das innere div vertikal in Bezug auf das äußere div zentrieren. Mit den CSS-Eigenschaften transform und top können wir das innere div vertikal zentrieren.

Die Eigenschaft top legt nur die vertikale Position der positionierten Elemente fest. Die Eigenschaft zeigt je nach der auf die Elemente angewendeten Positionseigenschaft ein unterschiedliches Verhalten.

Wenn beispielsweise position auf relative gesetzt ist, bewegt sich der obere Rand des Elements von seiner normalen Position nach unten oder oben. Die Eigenschaft transform nimmt verschiedene Werte an und translateY() wird verwendet.

Die Funktion translateY() übersetzt das Element nur von der Y-Achse. Mit diesen beiden Eigenschaften können wir ein div vertikal zentrieren.

Erstellen Sie beispielsweise ein div-Element und umschließen Sie es mit einem anderen div-Element in HTML. Wählen Sie in CSS das äußere div aus und stellen Sie height, width und background-color auf 180px, 300px und blue.

Als nächstes wählen Sie das innere div aus und setzen die Eigenschaft position auf relative. Dann wenden Sie red als background-color-Eigenschaft an und geben 20px Höhe für div und verwenden translateY(-50%) als Wert der transform-Eigenschaft.

Im Beispiel unten platziert der Wert 50% der Eigenschaft top die Oberkante des inneren div in der vertikalen Mitte des äußeren div. Das innere div ist jedoch nicht zentriert, da es die height von 20px hat.

Der Wert translateY(-50%) verschiebt die obere Kante mit 50% ihrer Höhe nach oben. Es bewegt sich aufgrund des negativen Wertes nach oben, was bedeutet, dass sich das div um 10px nach oben bewegt. Auf diese Weise wird das innere div vertikal zentriert.

Beispielcode:

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

Verwenden Sie die CSS Flexbox, um das div in CSS vertikal zu zentrieren

Wir können einen flexiblen Container erstellen und die Eigenschaften justify-content und align-items verwenden, um das div in CSS vertikal zu zentrieren. Mit der Eigenschaft display können wir den Container als Flexbox definieren.

Die Eigenschaft justify-content richtet die Elemente in der Flexbox horizontal aus. Es braucht verschiedene Optionen wie flex-start, flex-end, center usw.

Ebenso positioniert die Eigenschaft align-items die Elemente in der Flexbox vertikal.

Erstellen Sie beispielsweise ein div mit der Klasse box und erstellen Sie darin ein weiteres div. Schreiben Sie einen Text in das innere div.

Wählen Sie im CSS die Tags body und html aus und stellen Sie die Höhe auf 100%. Wählen Sie als nächstes die Klasse box und stellen Sie deren height auf 100%.

Setzen Sie background auf red und die Eigenschaft display auf flex. Setzen Sie zuletzt den Wert center auf die Eigenschaften justify-content und align-items.

Das folgende Beispiel zentriert den Text sowohl vertikal als auch horizontal innerhalb des div. Wir können diese beiden Eigenschaften nur innerhalb eines flexiblen Containers verwenden.

So können wir mit flexbox ein div zentrieren.

Beispielcode:

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}