Question

继this question之后，我向some JavaScript添加了this page以集中放置#container div。

然而，现在发生的是：

页面加载默认位置
JavaScript启动并重新定位#container集中

由于主要图像相当大，因此在内容“跳转”到中心位置之前会有明显的延迟。

正如我在原帖中所提到的，水平居中内容的正常方法是

#container { margin: 0 auto }

但我不能这样做，因为布局（我没写过），不必要地使用了很多绝对定位。

有什么方法可以消除这种跳跃效果，同时保持内容的中心位置？

谢谢！

Answer 1

它有点脏但是不要把你的javascript放在文件onload事件上。在结束div的结束标记之后将其直接放置。这将使它不那么明显

Answer 2

如果您知道容器的宽度，您可以始终以绝对定位方式居中：

#container { position: absolute; left: 50%; margin-left: <negative width divided by 2>; }

Answer 3

或将其设置为visibility：hidden;然后在定位之后将其设置为使用javascript再次可见。甚至淡入它。只有在访问者启用了js时才有用。那么你可以将它设置为隐藏在onload事件中或隐藏在带有js的div之后。所以如果js被停用，它仍然会存在。

Answer 4

也许将CSS设置为在页面加载时隐藏#container，

#container { display:none; }

设置边距后

然后.fadeIn()。

$(document).ready(function() {

    setMargins();

    $('#conatiner').fadeIn();

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

Answer 5

为容器提供“visibility：hidden”的CSS属性，并在定位完成后将Javascript删除。看起来该元素会在页面的其余部分后稍微加载，但它不会跳转，并且由于您没有使用“display：none”，容器会将其余内容推出边界框甚至虽然它是不可见的，所以页面的其余部分在加载时都不会跳转。

Answer 6

我不确定我完全理解这个问题..看看CSS，div是否水平居中？考虑这个规则：

#container {
  height:616px;
  width:1024px;
  left:50%;
  margin-left:-512px;
  margin-top:100px;
  top: 0px;  
}

它的宽度为1024px，我们说的是左侧位于页面中间的右侧。那么负左边距等于div宽度的一半会使div居中。

另外我注意到有些人建议将div设置为visible: hidden，然后在定位div后将其切换回JS。这不是一个好习惯，因为没有JS的用户永远不会看到任何东西。最好默认显示，用JS隐藏，然后在其他一切完成后重新显示。

如果我误解了，请发表评论

中心div水平没有“跳跃”

6 个答案: