Centrar Verticalmente con CSS

Alinear o Centrar Verticalmente una sección puede ser un efecto muy poderoso a emplear en nuestros sitios web, no es necesario ser un experto en html o css, y nuestra web y usuarios nos lo agradecerá.

Anteriormente «años atrás» con el uso de las tablas esto era aun más fácil de implementar, gracias a la propiedad vertical-align, Pero con la llegada del «Div», las cosas cambiaron, el uso de las tablas ha pasado a un segundo plano, prácticamente con uso nulo.

Ahora si manos a la obra, a continuación tres diferentes formas de alinear verticalmente usando solamente CSS y totalmente validas por W3C.

1 – Alto de Linea [Line-height]

Este método únicamente nos sera de utilidad solo si necesitamos alinear una sola linea de texto, Puede ser una Frase, Slogan, Tweet, etc.

Implementación

<!-- HTML -->
<div id="padre">
	<div id="hijo">Texto alineado verticalmente.</div>
</div>


<!-- CSS -->
#hijo {
	line-height: 200px; //Damos 200px de alto para notar el efecto
}

Resultado

2 – Tabla CSS [CSS Table]

Seguramente ya te estarás preguntado, Por que tabla?, bueno estas en todo tu derecho, puesto que anteriormente mencione que las tablas es ya algo del pasado, muy poco utilizado en la actualidad.

Pero descuida, no utilizaremos tablas, solamente le diremos a los navegadores que interpreten dicha capa DIV como si fuera la celda de una tabla y de esta forma poder utilizar la propiedad: vertical-align. Manos a la obra.

Implementación

<!-- HTML -->
<div id="padre">
	<div id="hijo">Contenido a centrar aquí.</div>
</div>



<!-- CSS -->
#padre {
	display: table;
	height:200px;
}
#hijo {
	display: table-cell;
	vertical-align: middle;
}

Resultado

Eso a sido todo, espero sea de mucha utilidad. Y hasta la próxima.