Question

所以我可以使用以下CSS成功地居中div：

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

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

问题在于，当我做同样的事情但将宽度设置为100％时，页面不再居中。这限制了我可以创建页面的动态，因为我必须为每个屏幕宽度创建一个容器（以px为单位）。

如何创建一个容器，使我的页面的中心宽度为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>

希望这会有所帮助：）

Answer 2

如果您要在该容器中包含要居中的文本，请将text-align: center;添加到您发布的CSS规则中。

如果容器中有其他元素要中心，请对它们应用margin: 0 auto，就像对容器本身一样（它们需要宽度小于100％才能产生任何效果.. 。）

Answer 3

我尝试创建一个最小的工作示例：

<!DOCTYPE html>
<html>
<head>
    <title>CSS center</title>
    <style type="text/css">
        .container {
            height: 100px;
            width: 100%;
            background-color: red;
        }
        .content {
            margin: 0 auto;
            height: 100px;
            width: 80%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>
</html>

蓝色内容是红色容器宽度的80％，并且以父级为中心。

Answer 4

如果您想要居中内容，则应添加保证金：0自动; to content.Not to container。

.container {
    width: 100%;
}
.content {
    margin: 0 auto;
    height: 100px;
    width: 50%;
    background-color: black;
}

以<div>为中心，宽度为100％？

4 个答案: