没有万能居中模板，需按场景选方法：text-align:center作用于父容器且仅对行内内容生效；margin:0 auto要求块级元素+显式宽度+非flex父容器；flex需配合justify-content和align-items并注意父容器高度；absolute+transform适用于脱离文档流元素但影响可访问性。
没有“在任何容器下都居中”的万能模板——所谓通用，其实是选对方法、避开陷阱，而不是套一个 class 就万事大吉。
text-align: center 只对行内内容生效
它不是作用在目标元素上，而是作用在它的父容器上；且只影响内部的行内级内容（span、img、文字等）。如果子元素是 div 且没设 display: inline-block，text-align: center 对它完全无效。
- ✅ 正确用法：
<div style="text-align: center"><span>我居中</span></div> - ❌ 常见误用：
<div style="text-align: center"><div>我不会居中</div></div> - ⚠️ 注意：父容器若用了
float、position: absolute或display: flex，text-align的行为可能被覆盖或失效
margin: 0 auto 要求块级 + 显式宽度 + 非 flex/grid 父容器
这个看似简单，但翻车率极高。它只对块级、非浮动、非绝对定位、且父容器不是 display: flex 或 display: grid 的元素起作用。
- ✅ 必须同时满足：
width（不能是100%）、display: block（默认即可）、父容器无flex/grid - ❌ 写了
margin: 0 auto却不动？八成是忘了设width，或者父容器用了display: flex - ⚠️ 兼容性好，但无法垂直居中；若父容器高度不定，别指望靠它做全居中
Flex 布局居中需明确控制主轴和交叉轴
display: flex 是目前最可控的方案，但它不是“加了就居中”，而是要理解 justify-content（主轴）和 align-items（交叉轴）的配合关系。
- ✅ 水平居中：
justify-content: center（主轴为row时） - ✅ 垂直居中：
align-items: center（交叉轴为column时） - ⚠️ 父容器必须有明确高度（如
height: 100vh）才能看到垂直居中效果 - ⚠️ IE10/11 对
align-items: center有 bug，老项目慎用；Safari 旧版本需加-webkit-前缀
绝对定位 + transform 是脱离文档流场景的可靠解
适用于模态框、提示层、加载 spinner 这类需要脱离正常流、又必须精准居中的元素。它不依赖宽高，但要求定位上下文正确。
- ✅ 标准写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - ✅ 父容器必须设
position: relative（或其他非static值），否则会相对于视口定位 - ⚠️ 子元素一旦用了
position: absolute，就脱离文档流，后续布局需另行处理 - ⚠️ 屏幕阅读器和键盘导航可能受影响，复杂交互组件需额外加
aria-hidden或焦点管理
真正容易被忽略的点是：居中从来不是单看“怎么写 CSS”，而是先判断“这个元素在什么上下文中、以什么方式参与布局”。text-align 和 margin: 0 auto 看似简单，但错配类型就彻底失效；flex 强大，但父容器一变，整个子元素行为就变；transform 精准，却悄悄绕开了可访问性和流式布局。选哪条路，得看它在页面里实际扮演什么角色，而不是哪个写起来最短。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
