css margin:auto 在 webkit 浏览器（Chrome 和 Safari）中最大化/全屏时不将 div 居中

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 中删除overflow:hidden，那么它就会正确居中。 但我需要这个（对于链接中未显示的部分）

我还发现，如果我完全删除菜单，它就可以工作。 所以我认为菜单CSS中一定有什么东西导致了这种情况。 它在 Firefox(4) 中运行良好。

我运行的是 Chrome 11.0.696.68 还有Safari 5.0.5

哦！我刚刚注意到，这种情况仅在 Chrome 最大化时发生，当它处于“窗口模式”（由于缺乏更好的名称）时，它会完美居中，即使窗口被拉伸到屏幕的完整尺寸。

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

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

任何帮助将不胜感激，
谢谢

Answer 1

添加 display: 块，看看是否有效。

Answer 2

解决办法：
内容 div 上方的 div (#copyright) 没有声明高度值。
声明高度值（35px）解决了我在 chrome/safari 中遇到的问题。

高度：自动；没有用。

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

Answer 3

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

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