CSS四个简单方法让DIV居中

建立

创建一个容器，其中包含一个简单的 box 元素，后续将使用它来演示这些居中方法。API天宁日记|网页模板_网页设计_网站建设
这是 HTML：API天宁日记|网页模板_网页设计_网站建设

<article>
  <div></div>
</article>

这是我们的起始 CSS：API天宁日记|网页模板_网页设计_网站建设

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

现在，让我们看一下将 div 居中的各种方法。API天宁日记|网页模板_网页设计_网站建设
 API天宁日记|网页模板_网页设计_网站建设

1. 使用 CSS 网格和放置自我居中 div

我最喜欢使用 Grid 让元素居中。API天宁日记|网页模板_网页设计_网站建设
将div 居中：API天宁日记|网页模板_网页设计_网站建设

article {
  display: grid;
}

div {
  place-self: center;
}

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
  place-self: center; /* new */
}

body {margin: 0;}

2. 让DIV两端对齐

现在使用 Grid 将我们的 div 居中。API天宁日记|网页模板_网页设计_网站建设

设置属性的方法有很多，但在这里将其设置为 justify-content:centerAPI天宁日记|网页模板_网页设计_网站建设

align-items: center 垂直对齐。API天宁日记|网页模板_网页设计_网站建设

article {
  display: grid;
  justify-content: center;
  align-items: center;
}

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
  justify-content: center; /* new */
  align-items: center; /* new */
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

body {margin: 0;}

3. div自动边距居中

将div 分配为自动边距。这使得浏览器自动计算子 div 周围的可用空间，并将其垂直和水平划分，将 div 放在中间：display: grid; margin: autoAPI天宁日记|网页模板_网页设计_网站建设

article {
  display: grid;
}

div {
  margin: auto;
}

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
  margin: auto; /* new */
}

body {margin: 0;}

4. 使用 CSS 内联将 div 居中

它可以通过定位容器来使我们的 div 居中：place-itemsAPI天宁日记|网页模板_网页设计_网站建设

article {
  display: grid;
  place-items: center;
}

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
  place-items: center; /* new */
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

body {margin: 0;}

结论

这些方法中的每一种都可以让DIV在容器内水平和垂直地居中。API天宁日记|网页模板_网页设计_网站建设