根本原因是元素未同时满足“明确宽度”和“处于正常文档流中的块级元素”两个条件；常见干扰包括父容器用flex/grid、子元素浮动或绝对定位、宽度设为100%无剩余空间等。
固定宽高的块级元素用 margin: 0 auto 却不居中？
根本原因就一个：margin: 0 auto 只对「有明确宽度」且「处于正常文档流中的块级元素」生效。它不是魔法，而是靠浏览器把左右外边距均分父容器剩余空间来实现的。
常见错误现象：div 写了 width: 300px; margin: 0 auto 还是贴左——大概率是父容器没给宽度、或子元素被设成了 display: inline-block 或 float，又或者父容器用了 display: flex 直接接管了对齐逻辑。
- 必须显式设置
width（比如width: 300px或width: 80%），不能是width: 100%（没剩余空间可分） - 确保元素是块级行为：默认
div没问题，但span必须加display: block - 父容器不能是
display: flex或display: grid，否则margin: auto被忽略 - 别同时设
float或position: absolute，它们会让margin: auto失效
position: absolute + top/left: 50% 偏右下？
这是最典型的“半步错，全盘偏”：只写了 top: 50%; left: 50%，却漏掉 transform: translate(-50%, -50%)。此时元素左上角被拉到父容器中心点，视觉上必然右偏、下偏。
关键前提：父容器必须有 position: relative（或 absolute/fixed），否则参考系变成视口，滚动时元素会“飘走”。
- 子元素必须设
position: absolute - 父容器必须设
position: relative（否则定位上下文失效） -
transform: translate(-50%, -50%)的百分比按元素自身宽高计算，所以它不依赖尺寸是否已知 - 如果父容器本身有
transform（如缩放），一般不影响；但若用了transform-style: preserve-3d，可能改变层叠上下文，需实测
行内元素（如 img、span）怎么水平居中？
给它们加 margin: 0 auto 或 justify-content: center 都无效——因为它们根本不是块级，也不参与块级流布局。真正起作用的是父容器的 text-align: center。
注意边界情况：如果子元素里混用了 float 或 position: absolute，text-align 就不再影响它；inline-block 元素虽是行内级，但能响应 text-align，前提是父容器没被 font-size: 0 或其他白空间处理干扰。
- 对
img、a、span等，默认display: inline，只需父容器设text-align: center - 若子元素是
display: inline-block，同样适用text-align: center，但要留意父容器的空白符（换行/空格）会生成间隙 - 别在子元素上写
margin: 0 auto—— 它不认这个规则
Flex 布局居中为什么有时“没反应”？
display: flex 是现代项目首选，但它作用在父容器上，不是目标元素本身。很多问题出在“以为设了 flex 就万事大吉”，忽略了它的约束条件和副作用。
典型翻车点：子元素自己设了 width: 100%，结果撑满父容器，justify-content: center 完全失效；或者父容器用了 flex-direction: column 却还在用 justify-content 控制水平方向。
- 水平居中：父容器设
display: flex+justify-content: center - 垂直+水平居中：再加
align-items: center（仅对 Flex 项目生效） - 如果子元素是
display: block且width: 100%，它会无视justify-content—— 因为没“剩余空间”可居中 - IE10/11 对
justify-content支持有 bug，老项目慎用
真正容易被忽略的是：居中从来不是“选一种方法就行”，而是先判断元素类型、定位状态、父容器限制，再决定用哪条路径。同一个页面里，text-align: center、margin: 0 auto、flex、absolute + transform 往往共存——不是谁替代谁，而是各司其职。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
