Inhalte mit CSS vertikal zentrieren (einfache Methode)

Lass uns deine Designelemente mit CSS und HTML vertikal ausrichten! Obwohl viele nach dieser Methode suchen, ist vertikales Zentrieren für Einsteiger schwieriger, als man denkt. Die folgende Methode ist eine der einfachsten Möglichkeiten dafür.

Demo: So richtest du Inhalte mit CSS vertikal mittig aus

HTML

Kopiere den folgenden Code und füge ihn in dein HTML-Dokument ein.

<div class="div-outer">
    <div class="div-inner">
        <h4>Box One</h4>
        <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Two</h4>
        <p>Vertical Align Middle</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Three</h4>
        <p>Vertical Align Center</p>
    </div>
</div>

CSS

Kopiere den folgenden Code und füge ihn in deine CSS-Datei ein. Das äußere div braucht dasselbe min-height und line-height; in diesem Beispiel sind es jeweils 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

Falls dieses CSS bei dir nicht funktioniert, probiere die folgende Alternative.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

Du kannst die Farben der Boxen und Texte beliebig anpassen. Viel Spaß!