Question

我正在学习这里的技术：

Vertically centering child div in parent container with JavaScript on page load is not setting position?

当我不知道容器的高度时，这允许我垂直居中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;">

你可以看到我在这里使用的代码/标记的一个例子，虽然我不能在JS Fiddle上复制这个问题：

http://jsfiddle.net/RKhmY/

在线演示再现Safari / Chrome中的错误。请注意firefox中的错误如何显示： http://so.s2371.gridserver.com/test.html

任何有关额外像素来自浏览器的想法会调整大小，从而导致跳转？

Answer 1

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

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

只需删除$(function () {和});

即可

http://jsfiddle.net/RKhmY/2/

Answer 2

如果你以另一种方式这样做，也许会有所帮助：

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

jsFiddle

CSS：

div.relative { position: relative; }
section#hero div.item, section#hero { min-height: 750px; position: relative;}
section#hero .wrp_item { width: 100%; position: absolute; top: 50%;}
section#hero .wrp_item .wrp_item_inner { padding: 0px 20px; }

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

Answer 3

我开始认为这可能是我的CSS的一个错误。我尝试过使用相同bug的其他插件。

作为参考，如果有人遇到同样的问题，下面的链接对我没有任何影响：

https://github.com/BrandonJacoby/Midway.js

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

3 个答案: