jQuery

        $(window).load(function(){
            /*we are using $(window).load() here because we want the coding to take
            effect when the image finishes loading. */

            //get the width of the parent
            var parent_height = $('#the_image').parent().height();

            //get the width of the image
            var image_height = $('#the_image').height();

            //calculate how far from top the image should be
            var top_margin = (parent_height - image_height)/2;

            //and change the margin-top css attribute of the image
            $('#the_image').css( 'margin-top' , top_margin);
        });

Demo     Source

The demo has some css is it, like horizontal centering (text-align:center) on the div, background, specific height and border so you can see the vertical centering is working perfect.

Final words

Easier then all that css tricks and hacks in order to make the same effect, isn’t it?

Related posts:

1. 10 Awesome jQuery and JavaScript Snippets
2. Making image captions using jQuery
3. Description text inside an input field
4. Image splitting effect with CSS and JQuery
5. How to make a completely reusable jquery modal window

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!