flexbox水平垂直居中需同时设justify-content: center和align-items: center，且父容器必须有明确高度（如min-height: 100vh），否则align-items因交叉轴无尺寸而静默失效；子元素须为正常文档流内直接子元素。
Flexbox 居中：最常用但父容器高度必须明确
现代项目里，display: flex 是最快、最直观的双重居中方案，但失效原因 90% 出在父容器没设高。
-
justify-content: center控制水平，align-items: center控制垂直，两行 CSS 就够 - 父容器必须有明确高度，比如
height: 100vh、min-height: 300px，或继承自一个有高度的祖先 - 如果父容器被
float、position: absolute或display: inline-block干扰了文档流，align-items会失效 - 子元素宽高不固定也没关系，
flex天然支持动态内容（如文字、图片、卡片）
Grid 的 place-items: center：语义清晰但兼容性有边界
一行代码搞定二维居中，写法比 Flex 更简洁，但 IE 完全不支持，Safari 15.4 之前对单子元素场景有渲染偏差。
-
display: grid+place-items: center等价于justify-items: center+align-items: center - 不需要父容器显式设高，只要它自身有尺寸（哪怕来自内容撑开），就能生效
- 如果父容器里有多个子元素，
place-items会影响全部；想只居中某一个，得用grid-column/grid-row单独定位 - 在 Grid 布局已存在的页面中混用要小心，避免和
grid-template-areas冲突
绝对定位 + transform: translate(-50%, -50%)：兼容老浏览器但依赖父级定位
这个组合至今仍被大量用于模态框、加载指示器等脱离文档流的场景，关键点不在 top/left，而在父容器是否“锚定”了定位上下文。
- 子元素必须设
position: absolute，且父容器需有position: relative（或absolute/fixed） -
transform: translate(-50%, -50%)的百分比是相对于元素自身宽高，不是父容器——所以无需知道具体尺寸 - 如果子元素本身已有
transform（比如scale(1.2)），应合并书写：transform: translate(-50%, -50%) scale(1.2)，否则顺序错乱会导致偏移异常 - 在频繁动画或
will-change: transform场景下，性能略低于 Flex/Grid，但稳定性更高
为什么 margin: auto 在绝对定位下有时不居中
很多人试过 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto，结果在 Safari 或某些安卓 WebView 里偏移几个像素——这不是 bug，是规范行为。
- 该写法要求子元素**必须有明确的
width和height**（不能是max-width或fit-content） - Safari 15.4 之前版本对
margin: auto在四边全设时的计算逻辑不一致，旧版 iOS WebKit 可能忽略部分约束 - 它本质靠浏览器自动分配外边距，而非几何中心对齐，所以在非对称布局或字体渲染差异大的环境里，视觉上容易“差一点”
- 适合弹窗、图标按钮这类尺寸固定的 UI 元素，不适合文本块或响应式卡片
position: absolute），对齐逻辑就立刻失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
