Inhoud verticaal centreren met CSS (eenvoudige methode)

Laten we je ontwerpelementen verticaal uitlijnen met CSS en HTML! Hoewel veel mensen naar deze methode zoeken, is verticaal centreren voor beginners lastiger dan het lijkt. De onderstaande methode is een van de eenvoudigste manieren om het voor elkaar te krijgen.

Demo: zo lijn je inhoud verticaal in het midden uit met CSS

HTML

Kopieer de onderstaande code en plak deze in je HTML-document.

<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

Kopieer de onderstaande code en plak deze in je CSS-bestand. De buitenste div heeft dezelfde min-height en line-height nodig; in dit voorbeeld zijn dat beide 200px.

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

Werkt deze CSS niet voor je, probeer dan het onderstaande alternatief.

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

Je kunt de kleuren van de vakken en teksten aanpassen. Veel plezier!