margin: 0 auto 实现块级元素水平居中需同时满足：元素为块级且有明确宽度；否则失效。常见原因包括无宽度、行内元素、flex/grid布局、浮动或绝对定位。
margin: 0 auto 能让块级元素自身在父容器里水平居中，但**必须同时满足两个硬性条件**：元素是块级（或可设宽的上下文），且有明确宽度；不满足任一，它就完全不生效。
为什么 margin: 0 auto 经常“没反应”
不是代码写错了，而是浏览器按规范执行——当条件缺失时，margin: 0 auto 就被忽略为 0。常见失效场景包括：
-
div没写width，哪怕只写了margin: 0 auto，浏览器认为它该撑满父容器，无剩余空间可分 - 目标是
span或a这类行内元素，margin-left/right对它们无效，auto更不会起作用 - 父容器用了
display: flex或display: grid，子元素变成 flex item / grid item，脱离常规文档流，margin: 0 auto的左右均分逻辑被覆盖 - 元素加了
float、position: absolute或position: fixed，同样让它退出块级格式化上下文
margin: 0 auto 生效的最小可行写法
只需三步，缺一不可：
- 确保元素是块级：默认
div、p、section就是；若从span改来，得显式加display: block或display: inline-block - 给它一个明确宽度：
width: 400px、width: 80%、max-width: 600px都可以，但不能是width: auto或未声明 - 写
margin: 0 auto（等价于margin-left: auto; margin-right: auto;）
例如：
.card {
width: 400px;
margin: 0 auto;
background: #f5f5f5;
padding: 20px;
}
和 display: flex 父容器混用时的典型翻车点
一旦父容器加了 display: flex，子元素即使写了 margin: 0 auto，也不会水平居中，反而可能被拉到垂直方向中心（主轴为水平时）。这不是 bug，是 flex 布局接管了外边距行为。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
此时正确做法是：
- 想让整个 flex 容器里的所有子项水平居中 → 在父容器上写
justify-content: center - 只想让某一个子项靠右 → 给它加
margin-left: auto（不是margin: 0 auto） - 坚持用
margin: 0 auto？得先让子元素退出 flex 上下文：align-self: auto+margin-left: auto; margin-right: auto，但语义混乱，不推荐
text-align: center 和 margin: 0 auto 别混用
text-align: center 是作用在父元素上的，影响的是父元素内部的「行内内容」：文本、span、img（默认行内）、button（默认行内块）等。它对块级子元素本身无效。
常见错误：
- 给一个
div自己加text-align: center，指望它自己居中——这是误解，它只是告诉“我里面的东西请居中”，不是“我自己请居中” - 误以为
text-align: center能替代margin: 0 auto实现块级元素自身居中
真正需要的是：让块级元素自己居中，用 margin: 0 auto；让内部文字或图片居中，才用 text-align: center。
flex 却没意识到子元素已脱离块级流，或者把 span 当成块级直接套 margin: 0 auto。这些地方最容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
