CSS 垂直对齐元素：三种常用方法详解

要让一个元素垂直对齐，可以使用 CSS 的垂直对齐属性和技巧。以下是几种常见的方法：

使用 Flexbox 布局：将元素的父容器设置为 display: flex，并使用 align-items 属性来控制元素的垂直对齐方式。例如：

.parent {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

使用表格布局：将元素的父容器设置为 display: table，并使用 display: table-cell 和 vertical-align 属性来控制元素的垂直对齐方式。例如：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中对齐 */
}

使用 Position 属性：将元素的父容器设置为 position: relative，并将元素设置为 position: absolute，并使用 top 和 transform 属性来控制元素的垂直对齐方式。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐 */
}

这些方法可以根据具体的需求选择适合的方式来实现元素的垂直对齐效果。