margin: 0 auto 实现块级元素水平居中必须同时满足两个硬条件：元素为块级且有明确宽度；否则因无剩余空间可分或脱离常规流而被浏览器忽略。
直接用 margin: 0 auto 实现块级元素水平居中，是最轻量、兼容性最好、无需 JS 或现代布局特性的方案——但必须同时满足两个硬条件：元素是块级的，且设置了明确宽度。
为什么 margin: 0 auto 有时没反应？
它不是“失效”，而是被忽略了前提。常见错误现象包括：
- 给
<button></button>或<span></span>直接写margin: 0 auto—— 它们默认是行内元素，不响应该声明 - 给
<div> 写了 <code>margin: 0 auto却没设width（或max-width、fit-content）—— 浏览器认为它要占满父容器，左右无剩余空间可分配 - 父容器用了
float、display: inline-block或position: absolute，导致其宽度塌陷或脱离常规流，子元素无法正确计算“可用空间” - 确保目标元素是块级：若原为
<button></button>或<a></a>，加display: block或display: inline-block（后者需配合text-align: center在父容器上） - 宽度不能留空：用
width: 600px、width: 80%或width: fit-content（注意 IE 不支持fit-content） - 外边距写全：推荐
margin: 0 auto，等价于margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto；避免只写margin: auto，以防上下也被拉伸 - 父容器别“塌”：若父容器是
或普通<div>，通常没问题；但若它本身浮动或未清除浮动，可能需要加 <code>overflow: hidden或伪元素清除margin: 0 auto和text-align: center到底谁管谁？这是最常混淆的点：两者作用对象完全不同。
-
text-align: center是**父容器的样式**，只影响其内部的**行内级内容**（文字、<img>、<span></span>、<button></button>等），对块级子元素的位置毫无影响 -
margin: 0 auto是**子元素自身的样式**，专门用于控制该块级元素在父容器中的**水平位置** - 典型误用：给一个
<p></p>设text-align: center，以为能让它居中——其实只是段落内文字居中；真正想让它在页面中居中，得给这个<p></p>加display: block; width: 50%; margin: 0 auto
它能垂直居中吗？
不能。
margin: 0 auto只处理水平方向。浏览器对margin-top: auto和margin-bottom: auto在常规文档流中不做居中计算（除非在 flex 或 grid 容器里）。如果看到“垂直居中”效果，大概率是以下情况之一：- 父容器有固定高度，且子元素用了
line-height匹配（仅限单行文本） - 父容器用了
display: table-cell+vertical-align: middle（已过时，不推荐） - 实际是 flex 布局混用了，比如父容器同时写了
display: flex和margin: 0 auto，此时起作用的是 flex，不是 margin
真要垂直居中，要么换
display: flex+align-items: center，要么用display: grid+place-items: center——margin: 0 auto就老老实实做它最擅长的事：快速、可靠、无脑地把一个定宽块水平钉在中间。 -
怎么写才真正生效？
关键在三步闭环：显式块级 + 明确宽度 + 自动外边距。实操建议如下：
