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

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
        });
    });
});