margin: 0 auto仅能水平居中，因水平方向有固定父宽可均分剩余空间，而垂直方向块级元素高度由内容撑开、无固定尺寸，故无剩余空间供margin分配；absolute+top/bottom/left/right=0时，margin:auto才可双向居中。
margin: 0 auto 只能水平居中，不是设计缺陷，是流式布局的自然结果
浏览器对块级元素的默认高度处理方式，决定了 margin: auto 在垂直方向上“无从下手”。水平方向有明确的父容器宽度可参考，左右 margin 能均分剩余空间；但垂直方向上，块级元素高度由内容撑开，height: auto 意味着“没有固定尺寸”，也就没有“上下剩余空间”供 margin 分配。
常见错误现象：margin: 0 auto 写成 margin: auto 或 margin: auto 0，结果元素依然顶在父容器顶部 —— 因为垂直 margin 全部被忽略，浏览器压根不计算。
- 父容器没设
height或min-height，子元素又没内容撑高，那它实际高度就是 0 -
margin: auto在非绝对定位、非 flex 子项的普通块级元素上，垂直部分始终无效 - 即使父容器有高度，只要子元素
height是auto，垂直居中逻辑就不会触发
absolute + margin: auto 能垂直居中，是因为它绕过了文档流约束
这个组合生效的关键，不是 margin: auto 本身变强了，而是它被用在了一个**脱离文档流、四边定位明确、宽高固定**的上下文中。此时浏览器会把 top: 0; bottom: 0; left: 0; right: 0 留出的空间，当作“可用余量”，再均分给 margin。
常见错误现象：元素卡在左上角、只水平居中、或整个消失 —— 大多因为漏了其中一项约束。
- 父容器必须有
position: relative（或其他非static值），否则absolute会往上找，定位基准错乱 - 子元素必须同时声明
top、bottom、left、right且都为0，缺一个，margin 就不会参与垂直计算 -
width和height必须是具体值（如200px、50%），不能是auto或fit-content
text-align: center 和 margin: 0 auto 的作用对象完全不同
text-align: center 是作用于父元素的，影响的是其内部**行内级内容**（比如 span、文字、img 默认是 inline）的水平对齐；而 margin: 0 auto 是作用于子元素自身的，只对 **block/inline-block** 元素有效，且依赖自身宽度。
容易混淆的点：给一个 div 设 text-align: center，里面放个没设宽的 img，看起来居中了——其实是 img 作为替换元素被当作了行内内容处理，不是 margin 在起作用。
-
text-align对块级子元素（如另一个div）完全无效，除非它被设为display: inline-block -
margin: 0 auto对inline元素无效，哪怕它在text-align: center的父容器里 - 两者混用时，要分清控制的是“内容对齐”还是“元素定位”
真正可靠的垂直居中方案，往往需要显式打破默认流
靠 margin: auto 垂直居中，本质是钻了绝对定位的空子；现代项目中更推荐直接使用 display: flex 或 display: grid，它们的居中逻辑清晰、容错率高、无需 hack。
但如果你必须兼容老浏览器，或嵌入已有绝对定位结构中，absolute + margin: auto 仍是少数几个能稳定工作的方案之一 —— 前提是你严格满足那四个条件：父相对定位、子四边为 0、子宽高固定。
最容易被忽略的细节：很多人写了 top: 0; bottom: 0;，却忘了 left: 0; right: 0;，结果 margin 只在水平方向生效，垂直方向仍为 0 —— 因为浏览器只在“所有方向都被约束”的前提下，才启用 margin 的双向自动分配逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
