没有“完美居中”，只有“刚好够用且不翻车”的方案：text-align: center作用于父容器内行内元素，margin: 0 auto需块级元素定宽，flex居中须同时设justify-content和align-items并确保父容器有高度，transform居中需配合position、top/left及translate三步缺一不可。
没有“完美居中”这回事，只有“刚好够用且不翻车”的方案。选错方法会导致响应失效、嵌套爆炸、IE兼容崩坏，甚至让 margin 塌陷把你拉进调试深渊。
text-align: center 只对行内内容有效
它不是给子元素加的，是加在父容器上、作用于内部文本、<img>、<span> 这类行内级元素的。块级子元素（比如 <div>）完全无视它。
- 常见错误：给父容器设
text-align: center，又在里面放一个没设宽的<div>，结果它还是左贴边 - 适用场景：居中按钮文字、图标组、单行标题、
<img>（图片默认 inline-block） - 注意：
vertical-align: middle配合line-height或display: table-cell才能垂直对齐，单独用text-align不管垂直事
margin: 0 auto 要求块级元素有明确宽度
这是最常被忽略的前提——没 width 或 max-width，margin: 0 auto 就是摆设。浏览器根本不知道“左右均分”该从哪算起。
- 常见错误：写
.box { margin: 0 auto; }却漏掉width，结果元素撑满父容器 - 适用场景：固定宽度的卡片、登录框、banner 区域等需要稳定尺寸的容器
- 兼容性好，连 IE6 都支持；但只管水平，垂直方向得另配方案（比如
padding-top或 flex）
flex 居中必须同时设 justify-content 和 align-items
只写 justify-content: center 是水平居中，只写 align-items: center 是垂直居中。两者缺一不可，而且父容器必须有明确高度（或能撑开的高度）才能看到垂直效果。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：父容器
height: 0或没内容撑高，子元素“消失”——其实是被挤到顶部外了 - 子元素如果是多个，
flex-direction: column时，justify-content控制的是垂直方向，align-items控制水平方向，容易搞反 - 别在子元素上再套一层
display: flex来居中其内部文字——直接用text-align: center更轻量
transform: translate(-50%, -50%) 要配合 top: 50%; left: 50%
这是脱离文档流后的“手动归零”，三步缺一不可：position: absolute（或 fixed），top: 50%; left: 50%，transform: translate(-50%, -50%)。漏掉任意一个，就偏移错位。
- 常见错误：只写
transform不写top/left，元素原地不动；或写了top/left但忘了transform，元素左上角钉在中心点 - 适合模态框、加载指示器这类绝对定位组件；但父容器必须设
position: relative，否则会相对于视口定位 - IE9+ 支持，但
transform在旧版 Android WebView 里可能有渲染抖动
真正麻烦的从来不是“怎么居中”，而是“居中之后，它还响应吗？嵌套后会不会互相干扰？改个 padding 是否导致整个布局重算？”——这些细节比语法本身更消耗时间。
