css实现垂直居中方法

CSS实现垂直居中主要有几种常见的方法：

1. **Flexbox布局**：使用`align-items: center;`属性可以将行内的子元素垂直居中。对于容器设置为`display: flex;`即可。

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

2. **Grid布局**：在Grid容器中，`align-items: center;`同样能实现垂直居中。

.container {
  display: grid;
  place-items: center;
}

3. **定位+绝对/相对定位**：对包含元素使用`position: relative;`，然后对其子元素设置`position: absolute; top: 50%; transform: translateY(-50%);`。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4. **Table布局**：适用于表格布局，子元素默认会被水平和垂直居中。

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

5. **内联块级元素**：如果元素是内联块级元素，可以使用`line-height`与元素高度相等来实现垂直居中。

.child {
  line-height: 100%; /* 假设元素高度为100px */
}