html - css margin :auto not centering div in webkit browsers (Chrome and Safari) when maximised/full screen

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 最大化时发生，当它处于“窗口模式”(由于缺少更好的名称)时，它会完美居中，即使窗口被拉伸(stretch)到屏幕的全尺寸也是如此。

我还注意到，如果您删除#copyright，那么#content 会呈现在左侧，如果#copyright 和#choice 都被删除，那么内容div 会呈现在中心，如果您只删除#choice 它仍然呈现在右侧。

如果您删除#menu_all，那么它会正确居中。

如有任何帮助，我们将不胜感激，
谢谢

Answer 1

添加显示: block ，看看是否有效。