Como centrar verticalmente contenido con vertical-align, CSS

1244

Simulamos mediante CSS, a una serie de capas como tablas HTML o celdas de tabla, con esto lograremos que el navegador vea a divs como tablas y se pueda utilizar la propiedad vertical-align en ellas.

Hay que tener en cuenta que las tablas CSS no son lo mismo que table HTML.

Implementacion:

HTML

<div id="contenedor">
<div id="children">CONTENIDO QUE SE VA A CENTRAR VERTICALMENTE</div>
</div>

CSS

#contenedor {
display: table;
height:300px;
}
#children {
display: table-cell;
vertical-align: middle;
}

Con eso funciona perfectamente.