用display: flex最快实现居中，但需设父容器宽高；position: absolute+transform兼容性好；display: grid最简洁但IE不支持；margin: auto在absolute下不可靠。
用 display: flex 最快实现居中，但别忘了设父容器高宽
绝大多数场景下，display: flex 是最直接、兼容性足够（IE11+）的解法。它不依赖子元素尺寸，也不需要额外 DOM 节点。
常见错误是只给子 div 加 margin: auto 或只在父容器写 display: flex，却没设父容器的 height —— 浏览器默认高度由内容撑开，自然“看不出”垂直居中效果。
- 父容器必须有明确高度（比如
height: 100vh或固定像素值） - 加
justify-content: center水平居中，align-items: center垂直居中 - 如果子元素是行内元素或需要换行，记得加
flex-direction: column或确认其display类型
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键！ */
}用 position: absolute + transform 兼容老版本 Chrome/Firefox
当项目要支持 IE10 或某些安卓 WebView（如 UC 内核），flex 可能不稳定，这时传统绝对定位仍是可靠选择。
核心思路是：先用 top: 50%; left: 50% 把元素左上角挪到父容器中心，再用 transform: translate(-50%, -50%) 自身回拉一半宽高。
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
position: relative（否则absolute会相对于 viewport 定位） - 子元素不能依赖
margin: auto，它在absolute下无效 -
transform的百分比基于自身尺寸，不是父容器，所以安全；但若子元素宽高为auto且含文字，仍会居中（浏览器会按渲染后尺寸计算）
.container {
position: relative;
height: 100vh;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
display: grid 居中更简洁，但 IE 完全不支持
如果你的项目已放弃 IE，grid 是语义最清晰、代码最少的方案：一行声明即可完成双轴居中。
它不像 flex 那样需要考虑主轴/交叉轴方向，也不像 absolute 那样要手动计算偏移，但对容器尺寸和轨道定义更敏感。
- 父容器设
display: grid后，直接用place-items: center（等价于justify-items: center; align-items: center） - 若父容器没有显式定义
grid-template-rows或grid-template-columns，它会自动创建单个隐式轨道，适合简单居中 - 注意：Safari 旧版本（<16.4）对
place-items支持不全，可降级为分开写两个属性
.container {
display: grid;
place-items: center;
height: 100vh;
}别用 margin: auto 在 absolute 元素上碰运气
很多人试过给 position: absolute 的元素设 margin: auto，发现有时居中、有时不生效——这不是 bug，是规范行为。
只有当元素同时满足：left/right（或 top/bottom）都为 auto，且宽高确定时，margin: auto 才会触发居中计算。但现代浏览器对此支持不一致，尤其在高度自适应场景下极易失效。
- 不要依赖
margin: auto实现绝对定位居中，它不是设计来干这个的 - 如果真要用，必须显式写
left: 0; right: 0; top: 0; bottom: 0;，再加margin: auto，但不如直接用transform可靠 - Flex/Grid 方案里，
margin: auto对齐子项是有效的，但那是另一套机制，别混用
真正容易被忽略的是父容器的尺寸来源：无论哪种方案，只要父容器高度是 auto 且内部没内容撑开，所有“垂直居中”都会静默失败——它不是代码错了，是容器根本没高度可居中。
