Vertically center content with jQuery

Question

I am trying to center my entire content with jQuery. I've tried multiple solutions that have been posted but to no availability. My major problem is that it needs to work with IE6 thru IE8.

Here is the link: http://christopherburton.net/ie

Answer 1

$(function() {
    var $inner = $('#container');

    $inner.css({ marginTop:  ($(window).height() / 2) - $inner.outerHeight() / 2 });
});

That would calculate and set the correct margin-top value once. If you want to update that when someone resizes the browser window, you need to call that code in a resize event on the window object aswell. Like

$(function() {
    var $inner = $('#container');
    $(window).on('resize', function() {
        $inner.css({ marginTop:  ($(window).height() / 2) - $inner.outerHeight() / 2 });
    });
});

Answer 2

$( "elem" ).css({
    position: "absolute",
    top: "50%",
    marginTop: "-" + $( "elem" ).height() / 2 + "px"
});

Should work.

Answer 3

You don't need jQuery for that ..

Use CSS

Use this for Container class

#container {
position: absolute;
width: 525px;
height: 220px;
margin: 0 auto;
left: 35%;
top: 30%;
}