结论是：没有“兼容性不好”的居中方案，只有“用错了上下文”的居中写法；text-align只对行内内容有效，margin:0 auto需配width且父容器不能是flex/grid，align-items需父容器有高度和display:flex。
直接说结论：没有“兼容性不好”的居中方案，只有“用错了上下文”的居中写法。真正卡住的不是浏览器，而是你没意识到 text-align 不管块级元素、margin: 0 auto 会被 display: flex 覆盖、align-items 在父容器没高度时完全失效。
text-align: center 只对行内内容有效
很多人给父 <div> 加 text-align: center，指望里面一个 <div> 也居中——它不会动。这个属性只影响文字、<span>、<img>（当它们是行内元素时）在父容器内的水平对齐位置。
- 适用场景：段落文字、按钮文字、图标文字居中
- 常见错误：把
text-align: center当成“万能居中开关”，套在包裹卡片的容器上 - 如果子元素是
display: inline-block，它能被居中，但要注意父容器里有换行符或空格会引入额外空白，需用font-size: 0或注释删空格来消除偏移
margin: 0 auto 必须配 width 且父容器不能是 flex/grid
margin: 0 auto 看似简单，但失效频率极高。它靠浏览器均分左右外边距实现居中，前提是能算出“剩余空间”——所以必须显式设 width（不能是 100%），且元素得是块级。
- 必须同时满足：
display: block（或默认块行为）、width（如width: 400px或width: 80%）、父容器display为block或inline-block - 常见失效原因：父容器用了
display: flex或display: grid—— 这时margin: 0 auto被忽略，flex item 的对齐由justify-content控制 - IE6+ 都支持，但 Safari 对
margin: auto在绝对定位下的解析曾有 bug（Safari 15.4 前），慎用于弹窗类组件
Flex 居中必须检查父容器高度和 display
display: flex; justify-content: center; align-items: center 是现代项目首选，但“写了没效果”几乎全是上下文问题，不是属性本身不兼容。
立即学习“前端免费学习笔记（深入）”；
- 硬性前提：父容器必须有
display: flex，且有明确高度（比如height: 100vh、min-height: 300px，或被内容撑开）；否则align-items: center没参考长度，垂直方向无从居中 - 子元素若用了
float、position: absolute或display: contents，会脱离 flex 流，justify-content和align-items对它无效 - IE10–IE11 需加
-ms-前缀：display: -ms-flexbox、-ms-justify-content: center、-ms-align-items: center；Autoprefixer 可自动补全
绝对定位 + transform 是老项目兜底方案
当你要兼容 IE9+ 或绕过 flex 兼容问题时，position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 是目前最稳的全向居中组合，但它强依赖定位上下文。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动时错位 -
transform: translate(-50%, -50%)的百分比是相对于元素自身宽高，不是父容器——所以它不要求子元素尺寸固定，适合图片、动态文字等 - 注意：若子元素本身有
transform（如scale(1.2)），应合并写成transform: translate(-50%, -50%) scale(1.2)，避免顺序导致偏移偏差
真正容易被忽略的点是：居中从来不是单个 CSS 属性的事，而是“元素类型 + 父容器布局模式 + 尺寸约束”三者咬合的结果。改一行样式前，先确认这三件事——比查兼容表更管用。
