Javascript 在浏览器调整大小时使用jquery跳转垂直对齐子div

我在这里学习技术：

当我不知道容器的高度时，这允许我垂直居中放置一个div

不过，在Safari 7.0.1和Chrome 32.0.1700.77中，垂直对齐的div在浏览器调整大小时向上移动了约30px。在Firefox中，它只显示Safari和Chrome在浏览器上调整div的位置（无跳转）

加载时，在调整浏览器大小之前：

<div id="s1" class="wrp_item" style="bottom: 257.1px;">

<div id="s1" class="wrp_item" style="bottom: 286.2px;">

调整浏览器大小后：

<div id="s1" class="wrp_item" style="bottom: 257.1px;">

<div id="s1" class="wrp_item" style="bottom: 286.2px;">

您可以看到我在这里使用的代码/标记示例，尽管我无法在JS Fiddle上复制该问题：

在线演示重现Safari/Chrome中的bug。请注意，firefox中的错误是如何不显示的：

---

是否知道浏览器调整大小时额外像素的来源，从而导致跳转？

您已经在dom就绪处理程序中绑定了窗口调整处理程序，因此无需使用此语法

$(function () { //This line should be removed
    $(window).resize(function () {
        homepageLead();
    }).resize();
}); //This line should be removed

只需删除

$（函数（）{

和

}）

如果你用另一种方式做，可能会有帮助：


将内容（#s1）与css从顶部对齐50%
获取内容的高度（#s1）
为内容（#s1）提供内容高度的负边距/2


CSS:

jQuery：

jQuery(document).ready(function($) {

            var homepageLead = function () {
                var message = $('#s1'),
                    message_height = message.height();
                return message.css('margin-top', -message_height / 2);
            };

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

    // end     
    });

我开始认为这可能是我的CSS的一个错误。我试过其他有同样错误的插件

作为参考，如果有人有同样的问题，下面的链接对我来说没有任何跳转：

这并没有阻止浏览器调整大小的跳转。这几乎就像页面加载没有被正确定位一样。在浏览器上调整它的大小显示正确的位置。很好的方法，谢谢你清理了JS。不幸的是，在加载和调整浏览器大小之间仍然存在跳转。这种跳跃只发生在Safari和Chrome上。我试过使用边距顶部、填充顶部、顶部和底部。不管我把div放在哪里，我仍然会在浏览器调整大小时得到这个跳转；而不是message.height（）；在jQuery中。如果这解决了问题，那么它的原因是.height（）不计算div.I的填充高度、outerHeight和innerHeight。所有的结果都是一样的。你能把测试放到网上让我看看问题吗？