display: flex 是现代项目首选居中方案，核心为 justify-content: center 和 align-items: center；需父容器设宽高且不使用 position: absolute 子元素。
display: flex 是现代项目里最稳、最省心的方案，只要父容器支持 Flex 布局（IE10+），就别绕弯。
用 display: flex 实现居中（推荐首选）
核心就两行：justify-content: center 控制水平，align-items: center 控制垂直。它不挑子元素尺寸，不管是不是文字、图片还是动态内容，统统能居中。
- 父容器必须设宽高（否则可能“看不见”居中效果）
- 子元素不能同时设
position: absolute，否则会脱离 Flex 流，失效 - 如果子元素是多行文本，
align-items: center仍有效；但若想让每行文字在自身高度内垂直居中，得额外加line-height或用display: inline-flex - IE9 及以下不支持，降级时需 fallback 到定位方案
用 position: absolute + margin: auto（兼容老浏览器）
这个方法不需要知道子元素宽高，靠浏览器自动计算居中偏移，IE8+ 都能跑。
- 父容器必须设
position: relative - 子元素必须设宽高（哪怕只是
max-width或fit-content，但不能完全靠内容撑开） - 子元素要同时设
top: 0; right: 0; bottom: 0; left: 0;，再加margin: auto才生效 - 注意：如果子元素用了
transform或flex内部布局，margin: auto仍起作用，但优先级低于 transform 偏移
用 position: absolute + transform（适合未知尺寸）
这是最常被复制粘贴、也最容易出错的写法。原理是先定位左上角到中心，再反向平移自身一半。
-
top: 50%; left: 50%把子元素左上角拉到父容器中心 -
transform: translate(-50%, -50%)向左上各移自身 50%，实现整体居中 - 子元素宽高可以完全未知（比如一段动态加载的文本）
- IE9+ 支持，但旧版 Safari 需加
-webkit-transform前缀 - 慎用在动画场景：
transform会触发重绘，频繁居中 + 动画可能卡顿
用 display: grid + place-items（简洁但兼容性有坑）
place-items: center 是 Grid 的语法糖，等价于 justify-items: center; align-items: center，代码更短。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid即可，无需定义网格线 - 子元素依然可以是任意类型（块、行内、图片）
- Firefox 52+、Chrome 57+、Safari 10.1+ 支持；IE 完全不支持
- 如果父容器已有 Grid 轨道定义（如
grid-template-columns），place-items仍生效，但只影响子项对齐，不影响轨道本身
position、display 和尺寸约束，比反复改子元素更有效。 
