Como centrar una imagen verticalmente en un DIV con Javascript/JQuery
Ratio: 0 / 5
Algo recurrente que todo diseñador web necesita en algún momento es el poder centrar una imagen verticalmente. A lo largo de los años se han propuesto varias soluciones que, por un motivo u otro no funcionaban correctamente. Ya que por CSS nos quedamos cortos para centrar la imagen si no tiene una altura fija, vamos a hacerlo ayudándonos de Javascript / JQuery.
Mostrar/Ocultar código php
<div class="contenedor">
<img src="imagen.png" class="imagen" />
</div>
$(window).load(function(){ //Se espera a que se cargue la página antes de ajustar la posicion. Si no no encontrará la imagen.
var altura_div = $(".contenedor").css("height"); //La propiedad height debe estar definida en el css o en el código, sino no funcionará
altura_div = altura_div.slice(0, -2); //Quitamos la cadena "px".
$(".imagen").each(function() { //para cada imagen, si sólo será 1 imagen no es necesario el bucle each
var altura_img = $(this).attr("height"); //Altura de la imagen
var resto_altura = Math.round((altura_div - altura_img) / 2); //Restamos la altura del div con la altura de la imagen, la dividimos entre dos y la redondeamos
$(this).css("position" , "relative").css("top" , resto_altura); //Centramos la imagen relativamente con la altura que acabamos de calcular
$(".contenedor").css("visibility","visible"); //Como se ve como se modifica la posición de la imagen hemos optado por definir el DIV en el CSS como invisible, y aquí lo mostramos, una vez que hemos colocado la imagen en su sitio.
});
})
