Centrar verticalmente contenidos con CSS

A veces no resulta tan trivial conseguir que nuestros contenidos se centren verticalmente, es por ello que vamos a explicar como llevar dicha a cabo dicha tarea de una forma sencilla.

Antes de nada repasemos como funciona el centrado de contenidos horizontalmente:
Al elemento contenedor le ponemos la propiedad “text-align” con valor “center” y los elementos interiores se centran. Ahora bien este centrado solo funciona con elementos inline, si lo que queremos es centrar bloques, entonces debemos utilizar la propiedad “margin” con valores “0 auto” en los elementos interiores, es decir no en el elemento contenedor como en el caso anterior. De esta forma conseguimos el centrado horizontal para elementos con “display” con valor “block”.

En el caso del centrado vertical no nos vale la propiedad margin con valores auto como en el caso horizontal. Por ejemplo si lo que queremos es centrar un texto dentro de un elemento contenedor que tiene altura 20px, entonces una solucion sencilla es indicar que dicho texto tiene una altura de linea de 20px. Es decir poner la propiedad “line-height” con valor “20px”.

Ahora bien imaginemos que queremos centrar verticalmente una foto dentro de un elemento contenedor, como puede ser una etiqueta “div”. La foto tiene 100px de altura, y el contenedor 300px. Bien para lograr que la foto se centre verticalmente, debemos añadir un elemento dentro de la capa contenedora. Dicho elemento va a tener una altura de 300px (la misma que la capa contenedora), una anchura de 1px, un margen derecho de -1px, un display de bloque en línea, y una alineación vertical media. A su vez la imagen va a tener una alineación vertical media.

< span style=" display: inline-block; margin-right: -1px; vertical-align: middle; height:
400px; width: 1px; ">< /span>

Como conclusión decir, que para centrar verticalmente necesitamos tener dos elementos dentro de la capa contenedora, para que se centren uno respecto del otro.