Moving the script to the bottom of the document (just before the closing body tag) should fix the issue. From my limited understanding, it is running the script before the image element has been drawn, and that is what is causing the issue (which is why the margin top and left values are 0, as the image has no height or width until it has been drawn).

EDIT: The other thing that should fix it would be to wrap the jQuery in the following:

$(document).ready( function() {

});

This would stop the code from running until the page is loaded, but I believe placing scripts at the bottom of the document is best for page load times.

Hmm, I'm not entirely sure when it comes to JavaScript stuff, but does wrapping it in the document ready function above work?

$(document).ready( function() {
    var $img = $('img');
    $img.css({
          'display': 'block',
          'position': 'absolute',
          'top': $(window).height()/2,
          'left': $(window).width()/2,
          'margin-left': '-' + ($img.width() / 2) + 'px',
          'margin-top': '-' + ($img.height() / 2) + 'px'
    });
});

Edit: I just missed the quotes

@ChristopherBurton How about if you use a slightly older version of jQuery?

Whatever it is, it's very strange. I'm not having any issues on my end, but can see that your version isn't working. Mind using my code again so that I can see if the console shows any errors?

@joshuanhibbert So I think the issue is on my end because I'm using dual monitors. When I drag my browser window into the the other monitor, it starts to center. But the height is still slightly off.

@joshuanhibbert I changed it back. Try clearing your cache.

Right, glad you have it sorted, and to know that I was on the right track!

@ChristopherBurton Thanks to this thread I now know the difference between $(document).ready() and $(window).load(): http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/