元素水平垂直居中一、基础分类与核心方案元素居中分为水平居中、垂直居中和水平垂直居中，实现方式因元素类型（块级、行

元素居中分为 水平居中、垂直居中 和 水平垂直居中，实现方式因元素类型（块级、行内、绝对定位）和是否已知宽高而异。

.parent {
  text-align: center; /* 父元素设置文本居中 */
}

.child {
  width: 200px;
  margin: 0 auto; /* 左右margin自动均分 */
}

.child {
  display: table; /* 转换为表格布局 */
  margin: 0 auto;
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左平移自身宽度的50% */
}

.parent {
  height: 100px;
  line-height: 100px; /* 行高等于容器高度 */
  white-space: nowrap; /* 防止文本换行 */
}

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 负margin为高度的一半 */
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 向上平移自身高度的50% */
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 同时处理水平和垂直 */
}

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.parent {
  display: grid;
  place-items: center; /* 同时处理水平和垂直 */
}

.parent {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

答：
- flex 是一维布局（主轴+交叉轴），适合单行单列元素；
- grid 是二维布局，适合复杂网格结构，place-items 可同时处理水平和垂直居中。

答：
- 已知宽高：使用绝对定位 + 负margin（如 top: 50%; margin-top: -height/2）；
- 未知宽高：使用 display: table-cell 或 flex（需IE10+）。

答：
- top: 50%; left: 50% 将元素左上角移至父容器中心；
- transform: translate(-50%, -50%) 将元素自身向左上平移自身宽高的50%。

答：
- 单行文本：使用 line-height = 容器高度；
- 多行文本：使用 display: flex/grid 或 display: table-cell。

方案	优点	缺点	兼容性
flex布局	现代语法，简单高效	IE10+	现代项目首选
grid布局	二维布局，代码更简洁	IE不支持	现代项目高级应用
绝对定位+transform	无需知道宽高，支持动态调整	IE9+	兼容性较好
table-cell布局	兼容性好	表格布局特性可能影响其他样式	全浏览器