使用CSS实现盒子水平垂直居中的方法(8种)

当我们需要将一个盒子水平垂直居中时，可以使用CSS来实现。下面介绍8种常用的方法，详细攻略如下：

1. 使用flex布局

通过CSS中的display: flex可以实现盒子的水平垂直居中。

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

示例代码：

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

2. 使用grid布局

通过CSS中的display: grid和place-items: center可以实现盒子的水平垂直居中。

.container {
  display: grid;
  place-items: center;
}

示例代码：

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

3. 使用position绝对定位

通过CSS中的position: absolute和top: 50%、left: 50%和transform: translate(-50%, -50%)可以实现盒子的水平垂直居中。

.container {
  position: relative;
}

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

示例代码：

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

4. 使用position相对定位

通过CSS中的position: relative和position: absolute、top: 50%、left: 50%和transform: translate(-50%, -50%)可以实现盒子的水平垂直居中。

.container {
  position: relative;
}

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

示例代码：

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

5. 使用table-cell

通过CSS中的display: table-cell和vertical-align: middle可以实现盒子的水平垂直居中。

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

示例代码：

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

6. 使用transform

通过CSS中的transform: translate(-50%, -50%)和position: absolute、top: 50%和left: 50%可以实现盒子的水平垂直居中。

.container {
  position: relative;
}

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

示例代码：

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

7. 使用text-align和line-height

通过CSS中的text-align: center和line-height: 父元素高度可以实现盒子的水平垂直居中。

.container {
  height: 200px;
  text-align: center;
  line-height: 200px;
}

示例代码：

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

8. 使用margin

通过CSS中的margin: auto和position: absolute、top: 0、bottom: 0、left: 0和right: 0可以实现盒子的水平垂直居中。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%;
  height: 50%;
}

示例代码：

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

以上就是使用CSS实现盒子水平垂直居中方法的8种攻略。