Flexbox 是居中首选方案，父容器设 display: flex、justify-content: center 和 align-items: center 即可实现水平垂直居中，无需子元素尺寸，兼容性好但 IE10/11 对 align-items 支持不稳定。
display: flex 配合 justify-content 和 align-items 是目前最直接、最可靠的方式，无需知道子元素尺寸，不依赖定位，一行 CSS 就能生效。
用 Flexbox 实现居中（推荐首选）
只要父容器有明确高度（比如 height: 100vh 或固定值），子元素自动水平垂直居中，不管它是 div、img 还是文字。
常见错误：忘了给父容器设 display: flex，或者漏掉 align-items: center ——只写 justify-content 只能水平居中。
-
justify-content: center控制主轴（默认为水平方向）对齐 -
align-items: center控制交叉轴（默认为垂直方向）对齐 - 若子元素是单行文本，
text-align: center可省略；但含换行或块级子元素时，必须靠 Flex 居中 - 兼容性：Chrome 29+、Firefox 28+、Safari 9+、Edge 12+，IE10+ 需加
-ms-前缀（但 IE10/11 对align-items支持不稳定，慎用）
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Grid 方案适合二维布局场景
当你要同时控制多行多列、或需要更精细的网格控制时，display: grid 比 Flex 更自然。单个子元素居中只需一行声明。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：place-items: center 是简写，等价于 justify-items: center + align-items: center，但它只对 grid 容器内的直接子项生效；如果中间嵌套了其他容器，就不起作用。
-
place-items: center最简写法，但要求父容器是display: grid - 若已用 Grid 做整体布局（比如三栏+页脚），再单独居中某个模块，优先用
justify-self和align-self - 兼容性略优于 Flex：Grid 在 Safari 10.1+、Chrome 57+、Firefox 52+ 全面支持，IE 完全不支持
示例：
.container {
display: grid;
place-items: center;
height: 100vh;
}
绝对定位 + transform 适合模态框类浮动元素
当你需要脱离文档流（比如弹窗、tooltip、loading 动画），又不想依赖 Flex/Grid 的布局上下文时，这个组合最稳妥。
关键点在于：transform: translate(-50%, -50%) 的百分比是相对于元素自身宽高，不是父容器——所以不需要提前知道尺寸，也不用 JS 计算负 margin。
- 父容器必须设
position: relative（否则top/left会相对 body 定位） - 子元素需设
position: absolute，且top: 50%+left: 50%缺一不可 - 如果子元素宽高为
auto（如含动态文字），translate依然有效；但若内容撑开后触发滚动，需额外处理max-width或overflow
示例：
.container {
position: relative;
height: 100vh;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
别碰 margin: auto + 四边定位这种“玄学方案”
虽然 top: 0; bottom: 0; left: 0; right: 0; margin: auto 看似简洁，但它依赖浏览器在绝对定位下对 margin: auto 的特殊解释，行为不统一：
- Chrome 和 Firefox 大部分情况能居中，但 Safari 在某些 zoom 级别或缩放后会偏移
- 子元素若设了
min-width或flex相关属性，margin: auto可能失效 - 它不适用于 inline 元素，也不支持
vertical-align那类语义化对齐 - 调试困难：出问题时很难判断是定位逻辑错，还是 margin 被覆盖
除非你正在维护一个必须兼容 IE8 的老系统，否则没必要为省几行代码引入不确定性。
真正麻烦的从来不是“怎么写”，而是“什么时候不能用”。Flex 和 Grid 看似简单，但一旦父容器本身是position: fixed 或被 transform 影响，它的 containing block 就会变；而 transform: translate() 虽然灵活，却会让元素脱离 paint layer，频繁动画可能触发重绘。这些细节，往往要到真机测试或性能分析时才暴露。 
