CSS 实现固定中心垂直对齐

在前端开发中，我们经常需要将一个元素固定在父元素的中心，并实现垂直对齐。那么使用 CSS 如何实现呢？本文将介绍一种常用的方法。

方法

我们可以使用 position: absolute 和 top、bottom、left、right 的组合来实现垂直和水平方向的对齐。具体步骤如下：

1. 父元素需要拥有相对定位的属性，子元素需要拥有绝对定位的属性。
2. 在父元素中设置 display: flex 和 justify-content: center，使其子元素在水平方向上居中。
3. 在子元素中设置 top: 50%，将其上边缘移动到父元素中心的位置。
4. 在子元素中设置 transform: translate(-50%, -50%)，将其自身的中心位置移动到自身的中心位置。

Markdown 代码片段如下：

## 方法

我们可以使用 `position: absolute` 和 `top`、`bottom`、`left`、`right` 的组合来实现垂直和水平方向的对齐。具体步骤如下：

1. 父元素需要拥有相对定位的属性，子元素需要拥有绝对定位的属性。
2. 在父元素中设置 `display: flex` 和 `justify-content: center`，使其子元素在水平方向上居中。
3. 在子元素中设置 `top: 50%`，将其上边缘移动到父元素中心的位置。
4. 在子元素中设置 `transform: translate(-50%, -50%)`，将其自身的中心位置移动到自身的中心位置。

示例代码

HTML 代码片段如下：

<!-- 父元素 -->
<div class="parent">
  <!-- 子元素 -->
  <div class="child">
    Content
  </div>
</div>

CSS 代码片段如下：

/* 父元素样式 */
.parent {
  position: relative; /* 设置相对定位 */
  height: 300px; /* 设置高度 */
  border: 1px solid #ccc; /* 添加边框 */
  display: flex; /* 设置 flex 布局 */
  justify-content: center; /* 设置水平居中对齐 */
}

/* 子元素样式 */
.child {
  position: absolute; /* 设置绝对定位 */
  top: 50%; /* 将其上边缘移动到父元素中心的位置 */
  left: 50%; /* 将其左边缘移动到父元素中心的位置 */
  transform: translate(-50%, -50%); /* 将其自身的中心位置移动到自身的中心位置 */
}

效果如下：