实现垂直居中的多种方式

1. Flex box：快速实现单元素或多个元素垂直居中。

<div class="container">
  <div class="content">垂直居中</div>
</div>

// css
.container {
  display: flex;
  align-items: center;     /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh;           /* 容器高度 */
}

2. Gird布局：二维布局（行列对齐）

<div class="container">
  <div class="content">垂直居中</div>
</div>

// css
.container {
  display: gird;
  place-items: center; /* 简写：水平 + 垂直居中 */
}

3. 绝对定位+transform：兼容性佳，适用于已知子元素高度

<div class="container">
  <div class="content">垂直居中</div>
</div>

// css
.container {
  position: relative;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

4. table-cell：模拟表格布局

<div class="container">
  <div class="content">垂直居中</div>
</div>

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

5. margin：auto + 已知高度

<div class="container">
  <div class="content">垂直居中</div>
</div>

// css
.container {
  height: 100vh;
  display: flex;
}

.content {
  margin: auto; /* 自动上下左右外边距 */
}

6. calc计算位置

<div class="container">
  <div class="content">垂直居中</div>
</div>

// css
.container {
  height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  top: calc(50% - 25px); /* 假设子元素高度为 50px */
  left: 50%;
}