0

我想在我的一个较大的居中“全部”div 中有几个绝对定位的 div 容器，它们必须具有相对定位，以便它可以在浏览器中居中，这样我就可以完全控制内部 div，同时仍然能够有一个居中的页面。我试过这样做：

<body>
  <div id="all">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
  </div>
</body>

以此作为css：

#all
{
  background-color:#ffffff;
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  height:1300px;
}

#header
{
  background-color:#ff0000;
  position:absolute;
  top:0px;
  left:0px;
  width:1000px;
  height:200px;
}

#main
{
  background-color:#00ff00;
  position:absolute;
  top:200px;
  left:0px;
  width:1000px;
  height:1000px;
}

#footer
{
  background-color:#0000ff;
  position:absolute;
  top:1200px;
  left:0px;
  width:1000px;
  height:100px;
}

但是，#header、#main 和 #footer 都是分开的，并与顶部对齐，左侧未居中，并且与父 div #all 完全分开，因为 #all 像应有的那样居中。有人可以解释为什么会发生这种情况并告诉我解决方法吗？

4

1 回答 1

3

给予#all position:relative;和事情应该按预期工作。

于 2012-08-03T02:47:07.380 回答