使用jQuery垂直居中内容

Question

我试图用jQuery集中我的整个内容。我已经尝试了多个已发布的解决方案，但没有可用性。我的主要问题是它需要通过IE8与IE6一起工作。

以下是链接：http://christopherburton.net/ie

Answer 1

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

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

这将计算并设置正确的 margin-top 值一次。如果要在有人调整浏览器窗口大小时更新，则需要在resize对象的window事件中调用该代码。像

$(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"
});

应该工作。

Answer 3

你不需要jQuery ..

使用CSS

将此用于Container类

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