Centrado vertical de un elemento con CSS y JQuery

Hola a todos, hoy os vamos a escribir sobre un tema que realmente crea muchas veces quebraderos de cabeza a los maquetadores y no, no es el fin del mundo que predijeron los mayas para hoy, es el centrado de un elemento dentro de otro elemento. Para ello vamos a necesitar además del uso de CSS, una pequeña función jQuery que es la que se encargará de realizar el centrado vertical definitivo.

Os preguntareis porqué usar una función JQuery en lugar de hacer todo mediante CSS. Pues bien la respuesta es sencilla, usamos la función porque nos va a permitir realizar el centrado vertical dependiendo de los cálculos del tamaño de la pantalla en el momento actual, lo que además, nos permite llamar esa función en cada momento que se realice un cambio de tamaño de la pantalla, y de esa forma ese cambio en un diseño responsive siempre funcionará correctamente.

En fin vamos al código que es lo realmente importante. Para nuestro ejemplo vamos a realizar el centrado de una imagen dentro de un contenedor cualquiera, en este caso un div.

El código HTML sería el siguiente: