Cómo centrar contenido verticalmente con CSS (método sencillo)

¡Alineemos verticalmente tus elementos de diseño con CSS y HTML! Aunque mucha gente busca este método, centrar contenido verticalmente es más difícil de lo que parece para quien empieza. El método siguiente es una de las formas más sencillas de lograrlo.

Demo: cómo alinear verticalmente al centro con CSS

HTML

Copia el código siguiente y pégalo en tu 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 el código siguiente y pégalo en tu archivo CSS. El div exterior necesita el mismo min-height y line-height; en este ejemplo, ambos son 200px.

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

Si este CSS no te funciona, prueba la alternativa siguiente.

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

Puedes cambiar los colores de las cajas y del texto. ¡Diviértete!