Recently I had to vertically center an image, I tried all the css tricks. Making wrapper div as table and then inner div as table-cell with css property vertical-align:center.

On the other side it’s very easy to do with JQuery.

<div class="image_wrapper">

<img src="" alt="" class="my_image"/>

</div>

 

jQuery

$(window).load(function(){  

    //get the height of the parent  
    var parent_height = $('.my_image').parent().height();  

    //get the height of the image  
    var image_height = $('.my_image').height();  

    //calculate the top margin needed for the image to be at vertically center  
    var top_margin = (parent_height - image_height)/2;  

    //Change the margin-top css attribute of the image  
    $('.my_image').css( 'margin-top' , top_margin);  
});