CSS 垂直居中对齐

在前端开发中，实现元素的垂直居中对齐是一个非常常见的需求。在 CSS 中，有多种方式能够实现元素的垂直居中对齐。

1. 使用 line-height

使用 line-height 属性能够实现某些行内元素的垂直居中对齐效果。你可以将元素的 line-height 属性设置为与元素高度相等的值，来实现文本的垂直居中对齐效果。

示例代码：

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

2. 使用绝对定位和负边距

使用绝对定位和负边距是一种常用的实现元素垂直居中对齐的方式。你可以将元素的 top 和 left 属性设置为 50%，同时设置元素的 margin-top 和 margin-left 属性为元素高度和宽度的一半负数。

示例代码：

.parent {
  height: 300px;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

3. 使用 flexbox

使用 flexbox 布局能够方便地实现元素垂直居中对齐的效果。你可以将父元素的 display 属性设置为 flex，同时设置 justify-content 和 align-items 属性为 center，即可实现元素的垂直和水平居中对齐效果。

示例代码：

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

以上就是 CSS 垂直居中对齐的实现方式。在实际开发中，你可以根据需求选择适合的方式来实现元素垂直居中对齐效果。