水平居中 div 没有“跳跃”答案

【问题标题】：center div horizontally without "jumping"水平居中 div 没有“跳跃”
【发布时间】：2011-01-15 01:04:18
【问题描述】：

在this question 之外，我将some JavaScript 添加到this page 以将#container div 集中放置。

然而，现在发生的是：

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

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

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

#container { margin: 0 auto }

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

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

谢谢！

【问题讨论】：

听起来是时候重构 HTML/CSS 了；)
一个糟糕的方法，我什至不会把它作为答案，就是让容器在加载时不可见，并在跳转后设置显示。

标签： jquery css positioning css-position

【解决方案1】：

它有点脏，但不要将您的 javascript 放在文档 onload 事件中。将它直接放在结束 div 的结束标记之后。这将使它不那么明显

【讨论】：

@Don：Container div 的结束 </div> 标签。
他的意思是容器 div 的结束，就像这样
asf

【解决方案2】：

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

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

【讨论】：

这很有效，因为它可以防止以后回流，对吗？还是有不同的解释？

【解决方案3】：

或将其设置为可见性：隐藏；然后在使用javascript将其设置为可见后定位它。甚至淡入。仅当您的访问者启用了 js 时才好。好吧，您可以将其设置为隐藏在 onload 事件中或使用 js 的 div 之后。所以如果 js 被停用，它仍然会在那里。

【讨论】：

【解决方案4】：

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

#container { display:none; }

然后在设置边距后.fadeIn()。

$(document).ready(function() {

    setMargins();

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

它的宽度为 1024 像素，我们说的是位于页面中间的左侧。然后负左边距等于 div 宽度的一半导致 div 居中。

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

如果我有误解请评论

【讨论】：