javascript - 使用 jQuery 垂直居中内容

Question

我正在尝试使用 jQuery 来集中我的整个内容。我已经尝试了多种已发布但没有可用的解决方案。我的主要问题是它需要与 IE6 到 IE8 一起使用。

这是链接：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%;
}