CSS 如何在不使用 margin-left 的情况下居中5个 div

在本文中，我们将介绍如何使用 CSS 将5个 div 元素居中，而不使用 margin-left 属性。

阅读更多：CSS 教程

使用 Flexbox 实现居中

Flexbox 是一种强大的 CSS 布局模型，可以轻松实现元素的居中对齐。在这个方法中，我们将使用 display: flex 属性将容器设置为 flex 容器，并使用 justify-content: center 和 align-items: center 属性来实现水平和垂直居中对齐。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

接下来，我们在容器中添加五个 div 元素，并给它们一个公共的类名。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

然后，我们可以使用下面的 CSS 样式来设置这些 div 元素的样式。

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

这样，我们就成功将这五个 div 元素居中对齐了。

使用 Grid 实现居中

Grid 是另一种常用的 CSS 布局模型，可以将元素放入一个网格中。同样地，我们可以使用 Grid 来居中这五个 div 元素。

首先，我们需要将包含这五个 div 元素的容器设置为网格容器，并指定网格的列数和行数。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
}

然后，我们可以为每个 div 元素设置网格项的样式。

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

最后，我们只需将这个容器放在页面上即可实现这五个 div 元素的居中对齐。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

使用绝对定位实现居中

除了使用 Flexbox 和 Grid，我们还可以使用绝对定位来实现这五个 div 元素的居中对齐。在这种方法中，我们使用 position: absolute 和 left: 50% 来将 div 元素水平居中，然后使用 transform: translateX(-50%) 将其向左移动自身宽度的一半。

.container {
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px;
}

这样，我们也可以将这五个 div 元素居中对齐。