Guiabreve

Alinear verticalmente un elemento en CSS muchas veces es más complicado de lo que debería. El uso de tablas y celdas hace muy fácil el alineado vertical, mediante las propiedades align y valign pero esto no es para nada recomendable. Con CSS a veces es algo más complicado hasta que aprendemos 3 pequeñas cosas.

En CSS tenemos la propiedad vertical-align que no siempre funciona como queremos. Para evitar problemas y que el alineado vertical funcione correctamente tenemos que tener en cuenta lo siguiente:

• El vertical-align solo funcionara cuando el elemento al que se lo aplicamos es del tipo inline o inline-block.
• También es importante el line-height del elemento padre ya que este determinará la posición a la que se alineará.

Llevemos esto acabo

Vamos a tratar de alinear vertical y horizontalmente una imagen dentro de un div. Para ello empezamos con el siguiente código:

Como vemos, por mucho que la imagen tenga vertical-align: middle lo ignora y sigue pegada a la parte superior de la caja. Ahora, apliquemos el display: inline-block y un line-height de 200px a la caja superior (Alto de la caja):

Como vemos, ahora la imagen esta perfectamente alineada tanto vertical, como horizontalmente.

Por lo tanto, resumiendo. Para alinear un elemento verticalmente necesitamos que este sea tipo inline/inline-block y el elemento padre tenga un line-height adecuado.

Actualizado, ¡gracias al comentario de Sergiomas!