Javascript 调整大小后，div.height（）会更改，而不告诉它

我正在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像素）。也就是说，第一次加载时，它会集中。调整大小时，高度变小，因此边距顶部变大，整个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;
        }
    }
}

---

您是否尝试过设置欢迎元素的高度？调整浏览器的大小可能会调整该元素的大小，因为其高度未定义

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

---

至少看看这对你看到的行为是否有任何影响

我想这与你的“欢迎”节目中的图像有关。尝试替换：

$(function(){
    $window_height = ...

与

---

这应该给图像完全加载的时间。

首先，您是否绝对需要使用jQuery/JavaScript来实现垂直中心？通过CSS使用

top:50%即可轻松实现；页边距顶部：-100px

方法，其中“100”将是内容高度的一半。演示：

如果您想使用jQuery，可以动态应用类似的CSS，就像您试图用代码实现的那样。演示：

作为额外的好处，您可以应用类似的技术将高度动态变化的父容器中的元素居中：

享受代码示例。：）

---

编辑：哦，简单解释一下是什么导致了高度的变化，例如，在Chrome中，“ready”事件是在DOM完成每个元素的最终尺寸计算之前触发的，因此当您试图在加载时获得元素的高度或宽度时，浏览器可能没有最新的信息。目前为止，这更像是一个Chrome元素，Firefox通常没有这个问题。

欢迎元素的类型是什么？它是一个嵌套了另一个div的元素。直接在body标签中。所以我尝试将高度设置为固定的361px。盒子看起来向下压，没有居中。以下是控制台日志在前后产生的结果：窗口高度为：600#welcome的高度为：361，因此边距顶部应为：119.5，但有点不对劲！当我检查元素时，它在浏览器中显示432px，因为它包含了填充（正如它应该的那样）。我已经尝试将高度设置为432px，但它只会向下拉长div，而不会使div居中。有趣的是，现在居中是一致的，但它仍然不包括div中的填充物，这使得div看起来向下压，而不是死角。@whyu，尝试使用

outerHeight（）

而不仅仅是

height（）

来获取内容的维度。谢谢，这很有效。我会记得outerHeight（）包括填充物！谢谢你的建议。我环顾四周寻找垂直定心技术，但似乎它们都有自己的注意事项。我打开了你的第一个和第二个JSIDdles并在选项卡之间切换，看起来它们之间的距离有点远？好吧，所以我尝试了你的例子，但是按照你的方式，因为位置是绝对的，所以margin:0 auto不起作用。而且，它似乎没有垂直居中。查看：如果您将margin属性更新为

margin:-100px0-250px，请访问#欢迎div

和添加

左：50%

，您也可以水平居中。与垂直居中的技巧相同。另外，请记住，填充会增加元素的总高度和宽度，因此，当您为居中设置负边距时，必须将其考虑在内。通过对#welcome元素应用

装箱大小：边框框

，可以阻止填充添加到元素的总尺寸中：@拉沙，我同意css解决方案不那么紧张，只要你事先知道div的高度。你能提供一些你所说的Chrome onload bug的最新链接吗？这听起来像是一个重大问题，我相信它会出现在chrome bug报告中。

$(window).on('load', function () {
   $window_height = ...