css - 带有 css div 的 Autocenter 主容器

Question

我试图让我的站点的主容器在资源管理器窗口较大时自动居中，或者在资源管理器窗口变窄时保持在左侧。

我将如何使用 CSS 实现这一目标？

现在大多数网站都这样做，例如bloomingdales.com。

当您将浏览器缩小时，主容器保持在左侧，一旦您在右侧打开浏览器，主容器就会自动居中。

谢谢！

我的网站：www.tahara.es

---

添加CSS：

body {
margin: 0 auto;
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}

.mainContainer
{
position: absolute;
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}

Answer 1

body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}

.mainContainer
{
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}

Answer 2

这应该这样做：

body {
  font-size: 11px;
  font-family: Arial,Helvetica,Verdana,Sans-serif;
  color: black;
  font-weight: normal;
}

.mainContainer {
  width: 850px;
  min-width: 850px;
  margin: 0 auto;
  border: 0;
}

在 JSFiddle 上查看

关键是你的div上没有position: absolute;。该属性将元素从正常的文档流中移除，这样它就没有父元素。margin: 0 auto;确定父元素的左右边距。把两个和两个放在一起，你可以看到它们是不相容的。