中心div水平

Question

在this page上，我希望主要内容div（其id值为container）在灰色背景上水平居中。但是我希望黑色登录面板在整个屏幕宽度上保持伸展状态。

为了实现这一目标，我添加了规则：

#container {
    margin: 0 auto;
}

但它不起作用，我做错了什么？

更新

感谢您的回答。有人建议我通过从正文中移除max-width并在width上设置container来解决问题。

这使container居中，但会占用所有可用的水平空间。我想要的是container以（例如）900px的宽度为中心，灰色背景应出现在container左右的“空”空间中。

Answer 1

你需要指定一个宽度，否则边距将不知道如何居中......

像这样：

#container {
    width: 960px;
    margin: 0 auto;
}

修改 另外，删除max-width !!

上的body

Answer 2

问题是你的身体元素有max-width: 960px;。非绝对元素的大小不会超过其父元素的边界。

您应该在max-width元素上设置width（或更好#container），否则div将自动调整为100％，因为它是一个块 - 等级元素。