如何在 div 的中心分配一些东西

在前端开发中，我们经常需要将一些元素垂直居中或水平居中，而如何在一个 div 的中心分配一些东西，是一个很常见的需求。下面，我们将通过 CSS 的几种方法来实现它。

方法一：使用 flexbox

使用 flexbox 是目前最常用的一种方法，它可以很方便地实现水平和垂直居中。

<div class="container">
  <div class="center">
    这里是居中的内容
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.center {
  text-align: center;
}

上面的代码中，我们将 container 设置为 flex 布局，并通过 justify-content 和 align-items 属性将其内部的元素居中，然后设置其高度为视口高度，这样居中的元素就可以在垂直方向上居中了。而为了将内容水平居中，我们将 .center 元素的 text-align 属性设置为 center。

方法二：使用 position 和 transform

另外一种方式是使用 position 和 transform 属性。

<div class="container2">
  <div class="center2">
    这里是居中的内容
  </div>
</div>

.container2 {
  position: relative;
  width: 100%;
  height: 100vh;
}
.center2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

在上面的代码中，我们将 .container2 指定为相对定位，然后将 .center2 元素使用 position: absolute 绝对定位，并设置 top 和 left 属性为50%，这会将该元素的左上角放在父级元素的中心处。接着，我们再通过 transform 属性将该元素向左和向上移动50%，以使元素真正的中心在父级元素的中心。此外，我们也将 .center2 元素的 text-align 属性设置为 center，以实现水平居中。

方法三：使用 table 布局

还可以使用 table 布局来实现在 div 的中心分配一些东西。

<div class="container3">
  <div class="center3">
    这里是居中的内容
  </div>
</div>

.container3 {
  display: table;
  width: 100%;
  height: 100vh;
  text-align: center;
}
.center3 {
  display: table-cell;
  vertical-align: middle;
}

在上面的代码中，我们将 .container3 设置为表格布局，并将其内部的元素使用 display: table-cell 属性作为表格单元格，然后通过 vertical-align 属性垂直居中，并将 .container3 元素的 text-align 属性设置为 center，以实现水平居中。

以上就是在 div 的中心分配一些东西的几种方法，不同的方法适合不同场合的需求，开发者可以根据实际情况来选择合适的方法进行布局。