Como centrar verticalmente contenido con vertical-align, CSS

1165

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
[code lang=”html”]
<div id=”contenedor”>
<div id=”children”>CONTENIDO QUE SE VA A CENTRAR VERTICALMENTE</div>
</div>
[/code]

CSS
[code lang=”css”]
#contenedor {
display: table;
height:300px;
}
#children {
display: table-cell;
vertical-align: middle;
}
[/code]

Con eso funciona perfectamente.