Question

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

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

但是代码最初不起作用。直到我在页面加载时尝试实际调整窗口大小时，我才弄明白发生了什么。一旦我实际调整浏览器窗口的大小，div立即居中。有什么方法吗？为什么会发生这种情况？

谢谢！

Answer 1

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

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


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

Answer 2

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

$(function () {

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

    _centerDiv();
}

然后我迷上了窗口的resize事件：

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

当你想以编程方式触发它时（如上所述，在文档就绪中加载，或者对任何其他事件，只需调用辅助函数。

约翰

Answer 3

选中此JSBin

我添加了定位：

 position: 'absolute'

jQuery将div居中到窗口垂直调整大小问题

3 个答案: