CSS 使用CSS垂直居中多个盒子

在本文中，我们将介绍如何使用CSS来垂直居中多个盒子。当我们想要在一个容器中同时垂直居中多个盒子时，可以使用以下方法来实现。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用Flexbox布局

Flexbox是一个强大的CSS布局模块，可以轻松地垂直居中多个盒子。要使用Flexbox布局垂直居中，需要将父容器的display属性设置为flex，并使用align-items和justify-content属性将内容垂直和水平居中。

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

在上面的代码中，我们定义了一个名为.container的类，它是包含多个盒子的父容器。通过将display属性设置为flex，盒子将按照一行的形式布局，并且可以轻松地设置垂直和水平居中。align-items属性用于垂直居中，justify-content属性用于水平居中。

使用Grid布局

与Flexbox类似，Grid布局也可以用于垂直居中多个盒子。要使用Grid布局垂直居中，需要将父容器的display属性设置为grid，并使用align-items和justify-items属性将内容垂直和水平居中。

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

在上面的代码中，我们同样定义了一个名为.container的类，通过将display属性设置为grid，盒子将按照一个网格的形式布局，并且可以轻松地设置垂直和水平居中。align-items属性用于垂直居中，justify-items属性用于水平居中。

使用绝对定位和transform

除了使用布局模块之外，还可以使用绝对定位和transform属性来垂直居中多个盒子。使用这种方法，需要将父容器的position属性设置为relative，并将子容器的position属性设置为absolute。通过将子容器的top和left属性设置为50%，再使用translate属性将子容器向上和向左移动自身高度和宽度的一半，即可实现垂直和水平居中。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的代码中，我们定义了一个名为.container的类作为父容器，通过position属性将其设置为relative。然后，我们定义了一个名为.box的类作为子容器，通过position属性将其设置为absolute。通过设置top和left属性为50%，再使用transform属性，子容器将相对于父容器垂直和水平居中。

示例

下面是一个使用以上方法垂直居中多个盒子的示例。在这个示例中，我们定义了一个名为.container的类作为父容器，其中包含了三个盒子，并分别应用了以上三种方法。

<div class="container flexbox">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

<div class="container grid">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

<div class="container absolute">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

.container {
  height: 400px;
  background-color: #eee;
  margin-bottom: 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 24px;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
  line-height: 100px;
}

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

.grid {
  display: grid;
  align-items: center;
  justify-items: center;
}

.absolute {
  position: relative;
}

.box.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的示例中，我们定义了一个包含三个不同方法的.container父容器，并应用了相应的类名.flexbox、.grid和.absolute来使用不同的布局方法。每个盒子都有相同的样式，包括宽度、高度、背景颜色等。