javascript - div .height() 在调整大小后更改而不告诉它

Question

我正在用 jQuery 编写一个函数来垂直居中元素。 我让它负载运行... 代码如下:

JQuery

var $window_height;
function Centerize(content) {
    content.css('margin-top', (($window_height - content.height())/2))
};

$(function(){
    $window_height = $(window).height();
    Centerize($('#welcome'));

    $(window).on('resize',function(){
        $window_height = $(window).height();
        Centerize($('#welcome'));
        });
})

问题是在调整大小时，我的 div 高度神奇地变得不同(缩短了 60 像素)。意思是，它第一次加载时，它居中。调整大小时，高度变小，因此 margin-top 变大，整个 div 被下推。

我已经在 $('#welcome').height() 上使用控制台日志进行了检查。

原值为432px。调整大小后，该值变为 361px，即使在我最大化 Chrome 后它仍然保持该值。有什么想法吗？

SCSS:

#welcome {
    margin: 0 auto;
    background-color: #DB9E36;
    border-radius: 30px;
    width: 800px;
    padding: 30px 50px;
    text-align: center;

    div {
        margin: 50px auto;
        background-color: #FFE34E;
        width: 300px;
        height: 50px;
        border-radius: 5px;
        a {
            display: inline-block;
            text-decoration: none;
            font-family: 'Quicksand', sans-serif;
            font-weight: bold;
            color: #FFFAD5;
            background-color: #BD4932;
            width: 100px;
            margin: 10px 10px;
            padding: 5px 0;
        }
    }
}

Answer 1

首先，你一定要用jQuery/JavaScript来实现垂直居中吗？可以通过 CSS 使用 top: 50%; 轻松实现。 margin-top:-100px 方法，其中“100”是内容高度的一半。演示:http://jsfiddle.net/lasha/dGcsB/

如果您想使用 jQuery，您可以动态应用类似的 CSS，就像您尝试使用代码实现的那样。演示:http://jsfiddle.net/lasha/dGcsB/1/

作为额外的好处，您可以应用类似的技术将元素置于高度动态变化的父容器中:http://jsfiddle.net/lasha/dGcsB/2/

享受代码示例。 :)

编辑:哦，简单解释一下是什么导致了高度问题的发生，例如，在 Chrome 中，“就绪”事件在 DOM 完成最终尺寸计算之前被触发每个元素，因此当您尝试在加载时正确获取元素的高度或宽度时，浏览器可能无法获取信息。目前，这更像是 Chrome 的问题，而 Firefox 通常没有这个问题。