Centrar verticalmente el contenido de un div con CSS

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.

2 comentarios en “Centrar verticalmente el contenido de un div con CSS”

  1. Nelson dice:

    me sirvió, muchas gracias

  2. juan dice:

    Amigo muchisimas gracias me sirvio
    Estoy empezando en CSS y me tope con este problema de alineación vertical de texto en un div
    Me solucionaste facil el problema
    Gracias

Deja un comentario