Come centrare verticalmente i contenuti con CSS (metodo semplice)

Allineiamo verticalmente gli elementi del tuo design con CSS e HTML! Anche se molte persone cercano questo metodo, centrare i contenuti in verticale è più difficile di quanto sembri per chi inizia. Il metodo qui sotto è uno dei più semplici per riuscirci.

Demo: come allineare al centro in verticale con CSS

HTML

Copia il codice qui sotto e incollalo nel tuo documento HTML.

<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

Copia il codice qui sotto e incollalo nel tuo file CSS. Il div esterno deve avere lo stesso min-height e line-height; in questo esempio entrambi valgono 200px.

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

Se questo CSS non funziona, prova l’alternativa qui sotto.

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

Puoi personalizzare i colori dei box e dei testi. Buon divertimento!