Centrar verticalmente el contenido de un div con CSS

Stay hungry, stay foolish

Steve Jobs

Bueno en esta ocasión les traigo un pequeño truco para centrar el contenido de un div con CSS. Para hacerlo vamos a hacer uso de la propiedad vertical-align, la cual nos permite posicionar verticalmente un elemento en linea que este contenido dentro de otro. La propiedad align solo se aplica sobre elementos en linea y celdas de una tabla.

La etiqueta div es un elemento de bloque, pero podemos hacer que se comporte como un elemento en linea o como una tabla, para ello vamos a hacer uso de la propiedad display. El codigo CSS es el siguiente, creamos un elemento contenedor al cual le asignamos la propiedad display: table, con lo cual el div se va a compartar como si fuera una tabla. Y un elemento contenido al cual le asignamos la propiedad display: table-cell y vertical-align: middle. Con esto seria suficiente pero el inconveniente es que no funciona con internet explorer.

Todos los navegadores, excepto explorer

.contenedor{
    display: table;
    height: 500px;
}

.contenido{
    display: table-cell;
    vertical-align: middle;
}

Para que funcione con internet explorer tenemos que agregar otro div dentro de contenido y hacer uso del posicionamiento absoluto. Aqui el codigo:

Todos los navegadores, incluyendo explorer

.contenedor{
    display: table;
    height: 500px;
    border: 1px solid;
    #position: relative;
}

.contenido{
    display: table-cell;
    vertical-align: middle;
    #position:absolute;
    #top: 50%;
}

.inner{
    #position:relative;
    #top:-50%;
}

En el contenedor utilizamos el posicionamiento relativo, el cual solo se aplicara si estamos utilizando internet explorer, esto por el hack # que tiene al principio. a contenido también le agregamos el posicionamiento absoluto y la propiedad top al 50% lo que hará que contenido quede a la mitad, pero todavía no esta centrado correctamente. Por ultimo inner que es el elemento dentro del cual esta la información que queremos centrar tiene un posicionamiento relativo y top al -50%, es decir que de lo que tenga de altura top le restara el 50%. y listo el contenido esta centrado.