最直接可靠的居中方案是 display: flex 配合 justify-content: center 和 align-items: center，无需子元素宽高，但父容器需设 height 或 min-height；grid 的 place-items: center 更简洁但兼容性略差；绝对定位+transform 是 ie 兼容降级方案。
用 display: flex 配合 justify-content: center 和 align-items: center 是目前最直接、最可靠的方式，不需要知道子元素宽高，也不依赖定位或 hack。
Flex 布局：父容器设为 flex 即可居中所有子元素
这是现代浏览器下的首选方案，一行代码就能解决绝大多数场景。
- 父元素必须设置
display: flex，否则justify-content和align-items不生效 - 子元素无需指定宽高，也无需
position或transform - 若父容器没有显式高度（比如只靠内容撑开），垂直居中可能失效——此时需给父容器加
height或min-height - 多个子元素会并排居中；如只需居中一个，其他子元素可用
margin: auto推开
示例：.parent { display: flex; justify-content: center; align-items: center; height: 100vh; }
Grid 布局：用 place-items 一键替代两行 flex 属性
和 Flex 类似，但更简洁，语义更明确，适合单个子元素居中。
-
place-items: center等价于justify-items: center; align-items: center - 同样不要求子元素尺寸，兼容性略逊于 Flex（IE 完全不支持，Chrome 57+/Firefox 52+ 支持）
- 如果父容器是全屏容器（如
body），注意body默认无高度，需加min-height: 100vh - 不推荐在已有 Grid 子项布局的容器里混用，容易覆盖原有网格行为
示例：.parent { display: grid; place-items: center; min-height: 100vh; }
绝对定位 + transform：兼容老浏览器但需小心触发渲染问题
当项目仍需支持 IE9–11 时，这是最稳妥的降级方案。
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算 -
transform: translate(-50%, -50%)的百分比基于自身尺寸，所以子元素宽高可动态变化 - 频繁动画时，
transform可能触发 GPU 合成层，旧版 Safari（iOS 9–10）偶现闪烁 - 不要在
will-change或transform动画中反复切换该写法，容易造成 layout thrashing
示例：.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
别踩这些坑：常见失效原因
居中失败往往不是方法错了，而是上下文没配对。
- 父容器没设高度（尤其是
height: 100%在未限定父级高度时无效），改用min-height: 100vh - 子元素用了
float或position: fixed，会脱离文档流，flex/grid 失效 - 父容器设置了
overflow: hidden且子元素超出，可能把居中后的内容裁掉 - 在 Vue/React 组件中，样式作用域（如
scoped）导致选择器未命中，检查生成的 class 名是否被修饰
真正麻烦的从来不是“怎么写”，而是“为什么写了却没效果”——先看父容器有没有高度、有没有脱离文档流、有没有被 scoped 意外隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
