最简最稳的居中方案是 display: flex + justify-content: center + align-items: center，父容器需设明确高度；兼容IE9用绝对定位+transform；现代浏览器可选place-items: center。
直接用 display: flex + justify-content: center + align-items: center，父容器设高宽即可，99% 的现代项目都该这么干。
Flex 布局：最简、最稳、最通用的居中方案
它不挑子元素类型（div、img、button、多行文本全都能居中），也不需要知道子元素尺寸，更不用写一堆 hack。
- 父容器必须有明确高度（比如
height: 100vh或固定值），否则align-items: center无法生效 - 别给子元素加
margin: auto—— Flex 下这句无效，纯属干扰 - 如果父容器是
body，记得重置margin: 0和padding: 0，否则会被默认边距顶偏 - IE10+ 支持，若需兼容 IE9，换用定位方案（见下一条）
绝对定位 + transform：兼容 IE9，适合模态框等固定场景
当项目必须跑在 IE9 或某些老内核 WebView 里，这是目前唯一靠谱的纯 CSS 替代方案。
- 父容器要设
position: relative，否则top: 50%会相对于 viewport 计算 -
transform: translate(-50%, -50%)是关键，它基于自身宽高偏移，所以子元素尺寸可变也没问题 - 别用
margin-left: -Xpx这种写死一半宽度的方式——一旦改尺寸就得同步改 CSS，极易漏改出错 - 如果子元素是图片或 SVG，注意它们默认是 inline 元素，可能受
vertical-align影响，建议统一加display: block
Grid 方案：一行代码搞定，但兼容性稍窄
如果你只支持 Chrome 60+、Firefox 52+、Safari 10.1+ 和 Edge 16+，place-items: center 是最省事的写法。
立即学习“前端免费学习笔记（深入）”；
- 只需在父容器写
display: grid; place-items: center，无需额外设置justify-content或align-items - 它和 Flex 一样不依赖子元素尺寸，也支持多子元素同时居中
- 注意：Safari 10.1–11.0.3 对
place-items支持不完整，得拆成justify-items: center; align-items: center - 不要在已用 Flex 的父容器上叠加 Grid —— display 属性互斥，后者会完全覆盖前者
真正容易被忽略的点是：居中效果是否“稳定”。很多方案在子元素内容动态变化（比如文字换行、图片加载失败、JS 插入新节点）后会偏移。Flex 和 Grid 天然响应内容变化，而绝对定位方案一旦子元素宽高突变（比如图片加载完成），只要没触发重绘，偏移就卡住不动 —— 这类 bug 往往要等上线后用户反馈才暴露。
