Como centrar conteúdo verticalmente com CSS (método simples)

Vamos alinhar verticalmente os seus elementos de design com CSS e HTML! Embora muita gente procure este método, centrar conteúdo verticalmente é mais difícil do que parece para quem está a começar. O método abaixo é uma das formas mais simples de o conseguir.

Demonstração: como alinhar verticalmente ao centro com CSS

HTML

Copie o código abaixo e cole-o no seu 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

Copie o código abaixo e cole-o no seu ficheiro CSS. O div exterior precisa do mesmo min-height e line-height; neste exemplo, ambos são 200px.

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

Se este CSS não funcionar, experimente a alternativa abaixo.

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

Pode alterar as cores das caixas e do texto. Divirta-se!