Flex布局居中需父容器设高度，否则align-items失效；absolute+transform兼容性好且不依赖高度；Grid的place-items: center最简但需现代浏览器支持；margin:auto仅适用于定宽高元素。
Flex 布局居中：最简方案，但父容器必须有高度
绝大多数现代项目直接用 display: flex + justify-content: center + align-items: center 就能搞定。但它不是“开箱即用”——如果父容器没显式设置 height，align-items: center 会失效（因为垂直方向没有可用空间）。
常见错误现象：.child 水平居中了，但顶部贴着父容器上沿，根本没垂直居中。
- 必须给父容器设
height（比如height: 300px或min-height: 100vh） - 子元素宽高可为
auto、百分比、固定值，完全不影响居中 - IE10+ 需加前缀
-ms-flex-align: center和-ms-justify-content: center（IE9 及以下不支持） - 如果父容器内还有其它非居中元素，它们也会被一起垂直对齐，可能破坏原有布局
absolute + transform：兼容老浏览器，但依赖定位上下文
当需要支持 IE9 或父容器高度动态变化时，position: absolute 配合 transform: translate(-50%, -50%) 是更稳妥的选择。它不要求父容器有固定高度，也不影响其他子元素流式布局。
容易踩的坑：top: 50% 是相对于父容器高度，transform: translateY(-50%) 是相对于自身高度——两个 50% 参照系不同，缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative（否则absolute会向上找最近的定位祖先，可能错位） - 子元素无需设宽高，也无需
margin或负值，真正适配未知尺寸 - 若父容器本身是
position: fixed或position: absolute，则不用额外设relative - 注意：该方案会让子元素脱离文档流，后续兄弟元素会填补空缺位置
Grid 的 place-items: center：一行代码，但兼容性稍窄
如果你的项目已全面采用 CSS Grid，或者目标环境明确支持现代浏览器（Chrome 68+/Firefox 63+/Safari 12.1+），place-items: center 是目前最简洁的写法，本质是 align-items: center 和 justify-items: center 的合并。
性能影响极小，但别在需要支持 Safari 11 或旧版 Edge 的项目里用——那些版本不识别 place-items，需回退到显式写两行。
- 同样要求父容器有明确高度（否则垂直方向无参照）
- 和 Flex 不同，它默认只作用于直接子元素，不会影响嵌套更深的后代
- 如果父容器已有
grid-template-areas或复杂轨道定义，place-items可能被隐式覆盖，建议优先检查align-items和justify-items
绝对定位 + margin: auto：仅适用于定宽高元素
这个方案看似简单，实际限制最多：top: 0; right: 0; bottom: 0; left: 0; margin: auto; 看似万能，但它只在子元素宽高**明确固定**时才可靠。一旦子元素宽高为 auto 或百分比，margin: auto 在垂直方向可能失效或拉伸子元素。
典型错误：把图片或文字块直接套用此法，结果子元素被撑满整个父容器，而不是居中显示。
- 必须同时设置子元素的
width和height（哪怕只是width: 200px; height: 50px） - 父容器仍需
position: relative，否则absolute会相对视口定位 - IE8 支持良好，但 IE7 及以下不支持
margin: auto在绝对定位元素上的垂直居中 - 相比
transform方案，它少了像素级精度控制，尤其在小尺寸容器中容易偏移半像素
