Centrado vertical con CSS
Si ustedes son los que han intentado lograr centrar algo verticalmente sabrán que es una tarea nada sencilla de lograr, ahora existen alternativas súper sencillas gracias a Flexbox pero antes de esto era casi imposible.
Vamos a explorar dos métodos para lograr esto, una con las nuevas técnica de Flexbox y un método que funciona incluso en navegadores poco modernos como IE.
Método para navegadores viejos:
CSS
/*La altura del contenedor es lo que permite el centrado vertical, los valores pueden cambiar e incluso el contenedor puede ser cualquier div que ya tenga una altura establecida*/
.contenedor {
width: 200px;
height: 200px;
}
.exterior {
display: table;
width: 100%;
height: 100%;
}
.interior {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centrado {
position: relative;
display: inline-block;
}
HTML
<div class="contenedor">
<div class="exterior">
<div class="interior">
<div class="centrado">
Aquí todo lo que quieras centrar
</div>
</div>
</div>
</div>
Resultado
See the Pen Centrado vertical método old school by CSS Tianguis (@css-tianguis) on CodePen.
Método Flexbox:
CSS
/*La clase contenedor es la que da la altura que permite alinear al item dentro*/
.contenedor {
max-width: 500px;
background: #eee;
height: 250px;
margin: 20px auto;
}
.alineador {
display: flex;
align-items: center;
justify-content: center;
}
.alineador-item {
}
HTML
<div class="alineador">
<div class="alineador-item">…</div>
</div>
Resultado
See the Pen Centrado vertical método Fexbox by CSS Tianguis (@css-tianguis) on CodePen.