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

我使用此方法在页面上垂直居中放置一个div：

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

但代码一开始不起作用。在加载页面时，我尝试实际调整窗口大小之前，我无法理解发生了什么。只要我实际调整浏览器窗口的大小，div就会立即居中。有办法吗？首先，为什么会发生这种情况

---

谢谢

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

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


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

---

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

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


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

---

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

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

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

当您想要以编程方式触发它时（如上所述，在文档ready中加载时，或者在任何其他事件中），只需调用helper函数

---

John

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

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

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

当您想要以编程方式触发它时（如上所述，在文档ready中加载时，或者在任何其他事件中），只需调用helper函数

约翰检查一下这个

我增加了定位：

 position: 'absolute'

检查这个

我增加了定位：

 position: 'absolute'

---

代码何时运行？您至少需要等待DOM准备就绪。您可能希望在

$（文档）包装中包装
$（窗口）。resize（）
函数调用。ready（）

包装。代码何时运行？您至少需要等到DOM准备就绪。您可能希望包装

$（窗口）。resize（）
$（document）.ready（）包装中的函数调用。