Cómo alinear verticalmente una imagen respecto a su contenedor

Antes de CSS3 no existía ninguna propiedad donde explícitamente indicáramos alineación vertical para el contenido de un contenedor. Se podía conseguir combinando una serie de propiedades utilizando css, vamos a repasar algunas de la posibilidades que teníamos para alinear una imagen verticalment respecto a su contenedor antes de CSS3 y como hacerlo con CSS3.

El códgo html con el que vamos a trabajar es el siguiente.

Vertical-align middle con display table-cell

Si utilizamos vertical-align sobre un elemento con la propiedad display a table-cell se alinea verticalmente su contenido.

De esta forma como se comporta como una celda de una tabla y podemos centrar su contenido verticalmente.

Este método para central verticalmente puede ser útil cuando no conocemos las dimensiones de la imagen.

#container{
 width: 150px;
 height: 200px;
 border: 1px solid silver;
 display:table-cell;
 vertical-align:middle;
}

Posición absoluta y margen negativo

Si conocemos el tamaño de la imagen podemos utilizar position absolute y especificar el top a 50%, pero esto sitúa la parte superior en el centro pero no el centro de la imagen. Para conseguirlo hay que restar la mitad de la altura como margen.
Para que la posición absoluta de la imagen sea sobre su contenedor y no sobre el body, tenemos que asignar position relative al contenedor.

#container{
 width: 150px;
 height: 200px;
 border: 1px solid silver;
 position: relative;
}

#container img{
 position: absolute;
 top:50%;
 margin-top: -75;
}

Posición absoluta y estiramiento vertical

Siguiendo la misma linea de antes teniendo el contenedor con position relative y la imagen absolute, tambien podemos central verticalmente si indicamos top y bottom de la imagen a 0 y margin auto, como la imagen tiene un alto menor que su contendor, es imposible que tenga top y bottom 0, por eso margin auto lo que hace es rellenar el espacio que falta para conseguirlo y de esta forma se centra la imagen.

#container{
 width: 150px;
 height: 200px;
 border: 1px solid silver;
    position: relative;
}

#container img{
 position: absolute;
 top:0;
 bottom:0;
 margin: auto;
}

Cajas flexibles en CSS3

Las formas que hemos visto hasta ahora para alinear una imagen verticalmente, no dejan de parecer truquillos aprovechando combinación de propiedades de CSS pero ninguna establecía de forma explícita la alineación vertical. Con la llegada de las cajas flexibles en CSS3 todo esto cambia bastante para mejor y se simplifica la forma de conseguirlo.

Las cajas flexibles de CSS3 están pensadas para simplificar la disposición de unos hijos respecto a su contenedor, su utilidad es muy amplia como podéis ver en estos enlaces que os dejo

https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pero centrándonos en el tema que nos ocupa si combinamos simplemente dos propiedades como display a flex y flex-align en el contenedor, es justo lo que necesitamos.

#container{
 width: 150px;
 height: 200px;
 border: 1px solid silver;

 display:flex;
 align-items: center
}

Utilizando caja flexible de CSS3 queda bastante claro lo que intentamos conseguir para cualquier persona que lea nuestro código css sin conocerlo, con los otros métodos, aunque son conocidos, no esta reflejado explícitamente lo que queremos conseguir.

Libros Relacionados

CSS3: The Missing Manual

HTML and CSS: Design and Build Websites

Pages