html - 将宽度为 100% 的 居中？

Question

因此我可以使用以下 CSS 成功地将一个 div 居中:

.container {
    width: 1024px; 
    margin: 0 auto; 
}

然后我在 body 标签内放置容器，覆盖所有显示的页面内容。这很好用。

问题是当我做同样的事情但将宽度设置为 100% 时，页面不再居中。这限制了我制作页面的动态程度，因为我必须为每个屏幕宽度(以像素为单位)创建一个容器。

如何创建一个将我的页面居中且宽度为 100% 的容器？

非常感谢。

Answer 1

如果你只想将一个 div 放在容器中。那么你在容器中将样式 div 设置为 margin:0 auto; .下面是简单的演示:

.container_
{
  width:100%;
  height:700px;
  background:green;
}

.centreBox
{
  width:50%;
  height:50%;
  margin:0 auto;
  background:red;
}

<div class="container_">
  <div class="centreBox">
  </div>
</div>

如果你希望 div 将它水平和垂直放置在中心

.container_
{
  width:100%;
  height:700px;
  position:relative;
  background:green;
}

.centreBox
{
  width:50%;
  height:50%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background:red;
}

<div class="container_">
  <div class="centreBox">
  </div>
</div>

而你想要放置宽度为 100% 的 div，那么它将占据整个可用的水平空间。你只能应用垂直居中:

.container_
{
  width:100%;
  height:700px;
  position:relative;
  background:green;
}

.centreBox
{
  width:100%;
  height:50%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background:red;
}

<div class="container_">
  <div class="centreBox">
  </div>
</div>

希望这有帮助:)