如何实现元素的水平垂直居中？

水平垂直居中的主流方案：

1. Flex（最常用）

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

2. Grid（最简短）

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

3. 绝对定位 + transform（兼容性好，不需知道子元素尺寸）

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

4. 绝对定位 + margin: auto（需给定子元素宽高）

.child { position: absolute; inset: 0; margin: auto; width: 100px; height: 100px; }

补充：单行文本用 text-align: center + line-height 等于容器高度；table-cell 方案（vertical-align: middle）已较少使用。

易错点：transform 方案在子元素尺寸为奇数像素时可能模糊；margin: auto 方案必须同时设置四方向定位与固定宽高。追问：不定宽高、需要兼容旧浏览器时选哪种；Grid 与 Flex 居中在溢出时的行为差异。