Animate a div from top to the center of the page

I want a div to animate from the top of the page to the center of the page. I used absolute positioning and made top : $(window).height / 2. I al开发者_JAVA技巧so tried top:50%.

But it shows different result for different screens. Can you suggest any stable solution? Here is my code:

        $('#targets').fadeIn('fast').animate({
            'top': ($(window).height()/2) - 20
            }, {duration: 'slow', queue: false}, function() {
            // Animation complete.
        });

$(function() {
    var tar = $('#targets');
    tar.fadeIn().animate({top: $(window).height()/2 - tar.outerHeight()/2}, {duration: 'slow', queue: false}, function() {
        //Animation complete.
    });
});

This should be bang on what you're after. Here's a working fiddle: http://jsfiddle.net/7R2wK/

$('#targets').fadeIn('fast').animate({
            'top': "50%", 'margin-top': +($('#targets').height()/-2)
            }, {duration: 'slow', queue: false}, function() {
            // Animation complete.
        });

You need to set a negativ margin-top of half the height of the div you're animating

Does this work for you?

http://jsfiddle.net/xYZTZ/3/

The trick is the negative margins you use based on the dimensions of the DIV.