图片默认为行内元素，margin: auto对其左右无效；需先设display: block转为块级元素，再用margin: 0 auto居中，且父容器需有明确宽度。
图片本身是行内元素，直接设 margin: auto 不生效
很多初学者会写 img { margin: auto; } 试图让图片居中，但完全没反应。这是因为 img 默认是 display: inline，而 margin: auto 对行内元素的左右方向无效——它只对块级元素在父容器中有明确宽度时才起作用。
必须先让 img 变成块级元素再用 margin: auto
关键一步是改变显示类型，否则后续所有居中操作都建立在错误前提上。常见写法有：
-
img { display: block; margin: 0 auto; }—— 最轻量、最常用 -
img { display: block; margin-left: auto; margin-right: auto; }—— 效果相同，语义更明确 - 避免用
display: flex或text-align: center替代，那属于不同机制，不是本问题要解决的「块级 + margin 自动」路径
父容器必须有明确宽度且不撑满（可选但常被忽略）
虽然 margin: 0 auto 在大多数情况下对块级 img 有效，但如果父容器是 width: 100% 或未设宽的 div，图片仍会默认占满父宽，看起来像没居中。真正起作用的是：图片自身宽度 父容器宽度。
所以检查点包括：
立即学习“前端免费学习笔记（深入）”；
- 图片是否被设了
width: 100%或max-width: 100%导致它撑满父容器 - 父容器是否意外设置了
display: flex或text-align: justify等干扰样式 - 是否有其他 CSS 规则（比如来自重置库）覆盖了
display: block
一个可靠的小例子
div {
width: 600px;
border: 1px solid #ccc;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
注意这里 max-width: 100% 是安全写法：既防图片超宽溢出，又保留其原始尺寸用于 margin: 0 auto 计算。如果去掉这行，而图片原始宽度大于 600px，它就会横向溢出，居中也就无从谈起了。
实际调试时，打开浏览器开发者工具，选中图片，看 computed 样式里 display 是否真为 block，margin-left 和 margin-right 是否显示为 auto —— 这比猜更准。
