Question

我想在我的一个较大的居中“所有”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的中心就像应该的那样。有人可以解释为什么会发生这种情况并告诉我一个解决方法吗？

Answer 1

提供#all position:relative;，事情应按预期进行。

相对于包含div的绝对定位

1 个答案: