加 display: block 是使 img 居中的必要前提，因其默认为行内元素，而 margin: 0 auto 仅对块级元素生效；若不设置，该样式会被浏览器直接忽略。
给 img 加 display: block 是最直接的方式
浏览器里 img 默认是行内元素（inline），而 margin: 0 auto 只对块级元素生效。不改显示模式，居中样式就等于没写。
实操建议：
-
display: block必须加在img元素自身上，不能只加在父容器或a标签上 - 如果图片被嵌在链接里（
<a href="..."><img></a>），仍要对img设display: block，否则整个a可能被当成行内框，导致居中失效 - 加了
display: block后，img会独占一行，若需多图并排居中，得额外处理（比如用flex父容器）
为什么只写 margin: 0 auto 没反应？
常见错误就是漏掉 display: block 这一步。浏览器看到 margin: 0 auto 作用在行内元素上，直接忽略——它连解析都跳过，更别说计算左右 margin 了。
典型翻车现场：
立即学习“前端免费学习笔记（深入）”；
-
<img src="x.jpg" style="margin: 0 auto;">→ 完全不动 -
<img src="x.jpg" style="display: block; margin: 0 auto; width: 100%;">→ 还是不动，因为width: 100%没有“剩余空间”可分配，auto失效 - 父容器用了
display: flex或display: grid，却还指望margin: 0 auto生效 → flex/grid 子项的margin: auto行为完全不同，不是居中而是撑开间距
display: block 之外的替代写法
如果你不想改 img 的 display 类型，也可以靠父容器控制，但本质还是让图片“表现得像块级”：
- 用
text-align: center：加在父<div>或<p>上，img保持默认inline即可生效 - 用
display: inline-block+text-align: center：适合需要保留图片行内特性的场景（比如图文混排时微调），但要注意换行符会产生空隙 - 现代项目首选
display: flex父容器：此时img无需改display，justify-content: center和align-items: center直接接管居中逻辑
响应式图片加 display: block 的注意事项
当图片本身用了 max-width: 100% 或 width: 100% 做响应式时，display: block 仍必须加，但要注意宽度值是否明确：
-
width: 100%→margin: 0 auto无效（没有“剩余宽度”可分） -
max-width: 400px; width: 100%→ 有效，因为最大宽度限制了实际渲染尺寸 - 推荐写法：
img { display: block; max-width: 100%; height: auto; margin: 0 auto; }，兼顾居中、缩放和比例保护
最容易被忽略的是：父容器有没有明确宽度。如果父 <div> 是 display: inline-block 或被 float 拉窄了，margin: 0 auto 计算出的“中间位置”就会偏移。
