Centrado con CSS (2): Vertical
Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.
No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.
En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.
Creamos un contenedor al que daremos la propiedad display: table
.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;
.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.
.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}Centrado Vertical con CSS, ejemplo 1
Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.
Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.
.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}
.contenedor[class] {
position: fixed;
display: table;}
.centrado {
position: absolute;
top: 50%;}
.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}
.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.
Centrado Vertical con CSS, ejemplo 2
