Question

我一直无法确定此问题的原因，因此我无法显示测试用例，相反，我已经将我的代码缩小到一个仍然包含错误的页面而没有太多额外的内容这是链接：
http://www.richard-walsh.limewebs.com/Disk-Edits/index.html

问题是内容div（id = content）不是Chrome和Safari的中心它位于右侧。

内容div被一个名为bottom的div包围，其宽度为100％;和身高：汽车;。

#bottom{
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

#content{
    width:862.4px;
    height:402px;
    margin:auto;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#030303;
    background-image:url(images/main.png);
    -moz-border-radius:15px;
    border-radius:15px;
    border-style:solid;
    border-color:#181818;
    border-width:4px;
    margin-top:60px;
    -moz-box-shadow: 1px 1px 20px 4px black;
    -webkit-box-shadow: 1px 1px 20px 4px black;
    box-shadow: 1px 1px 20px 4px black;
    overflow:hidden;
}

我发现如果我删除溢出：隐藏内容css，那么它正确居中。但我需要这个（对于未在链接中显示的部分）

我还发现如果我完全删除菜单就可以了。所以我认为菜单css中肯定会出现这种情况。它在Firefox（4）中运行良好。

我正在运行Chrome 11.0.696.68 和Safari 5.0.5

哦！我刚刚注意到这只会在Chrome最大化时发生，当它处于'窗口模式'时（缺少更好的名称），它会完美居中，即使窗口被拉伸到屏幕的整个大小。

我还注意到，如果删除#copyright，则会在左侧呈现#content，如果同时删除了#copyright和#choice，则内容div会在中心呈现，如果只删除#choice，仍然在右边呈现。

如果删除#menu_all则会正确居中。

非常感谢任何帮助，
感谢

Answer 1

添加display：block，看看是否有效。

Answer 2

解决方案：
内容div（#copyright）上方的div没有声明高度值。声明一个高度值（35px）修复了我在chrome / safari中遇到的问题。

高度：汽车;没用。

这并不能解释为什么当内容div直接放在它工作的版权div之下时。但仍然。这是一个可行的解决方案。因此，如果您遇到类似问题，请检查上面的div是否已声明高度。

Answer 3

<div id="content" class="post"></div>

不在#middle中，它在#bottom中。如果向上移动，布局似乎可以正常工作。

css margin：当最大化/全屏时，自动不在webkit浏览器（Chrome和Safari）中居中

3 个答案: