css子元素水平垂直居中

在CSS中，将子元素水平垂直居中通常有两种常用方法：

1. **Flexbox布局**:
如果父容器是flex容器，你可以使用`display: flex; justify-content: center; align-items: center;`。这会使得行内项目在主轴方向（默认为横向）和交叉轴方向（默认为纵向）上都居中。

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

2. **Grid布局**:
对于二维布局，可以使用Grid布局。设置`.grid-container`为`display: grid;`，然后设置`align-items: center;`和`justify-items: center;`。

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

3. **Positioning** (传统方法):
另一种常见的方式是使用绝对定位(`position: absolute;`)配合`left: 50%; top: 50%; transform: translate(-50%, -50%);`，让元素相对于其父元素居中。

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}