将宽度为 100% 的 <div> 居中？

Question

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

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

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

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

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

非常感谢。

Answer 1

如果您希望居中放置该容器内的文本，请将 text-align: center; 添加到您发布的 CSS 规则中。

如果容器内有其他要居中的元素，请对它们应用 margin: 0 auto，就像对容器本身所做的那样（它们需要小于 100% 的宽度才能产生效果...)

Answer 2

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

<!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 3

如果你想让内容居中，你应该添加 margin: 0 auto;到 content.Not 到容器。

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

Answer 4

如果您只想将 div 居中放置在 container.Then 中，您可以将 div inside container 的样式设置为 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，那么它将占据整个水平 space available.There 你只能应用垂直居中：

.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>

希望这对您有所帮助:)

将宽度为 100% 的 <div> 居中？

Centering a <div> with a width of 100%?

html

css

screen-resolution