CSS 中的垂直居中法

CSS中实现元素垂直居中的方法有很多种，以下是几种常用的方法及其示例代码：

1. 使用Flexbox布局:

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如需 */
}
 
.child {
  /* 子元素内容 */
}

2. 使用Grid布局:

.parent {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}
 
.child {
  /* 子元素内容 */
}

3. 使用绝对定位和transform:

.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 或者左右居中transform: translate(-50%, -50%); */
}

4. 使用行内元素的vertical-align和line-height:

.parent {
  line-height: 100px; /* 容器高度 */
}
 
.child {
  vertical-align: middle;
  display: inline-block;
  /* 子元素内容 */
}

这些方法可以根据不同的布局需求选择使用。