1

我正在使用这种方法在我的页面上垂直居中 div：

$(window).resize(function() {
    $('.container').css({
        top : ($(window).height() - $('.container').outerHeight()) / 2
    });
});
$(window).resize();

但是代码最初不起作用。在页面加载时尝试物理调整窗口大小之前，我无法弄清楚发生了什么。一旦我物理调整浏览器窗口的大小，div 立即居中。有什么办法吗？为什么会发生这种情况？

谢谢！

4

3 回答 3

3

您需要在加载和调整大小时运行此代码

$(document).ready(function(){
    $('.container').css({
        top : ($(window).height() - $('.container').outerHeight()) / 2
    });


    $(window).resize(function() {
        $('.container').css({
            top : ($(window).height() - $('.container').outerHeight()) / 2
        });
    });
});
于 2013-05-06T19:57:07.437 回答
1

我完成类似代码的方法是定义一个以 div 为中心的辅助函数（在 jquery onDocumentReady 中）：

$(function () {

    function _centerDiv() {
        $('.container').css({
            top : ($(window).height() - $('.container').outerHeight()) / 2
        });
    }

    _centerDiv();
}

然后我连接到窗口的调整大小事件：

    $(window).resize(function () {
        _centerDiv();
    }

当您想以编程方式触发它时（无论是在准备好的文档中加载，如上所述，或任何其他事件，只需调用帮助函数。

约翰

于 2013-05-06T19:58:08.757 回答
1

检查这个JSBin

我添加了定位：

 position: 'absolute'
于 2013-05-06T19:59:56.480 回答