图片水平居中最常用且兼容性最好的方案是给父容器设text-align: center；若需脱离行内流，则给<img>加display: block和margin: 0 auto，二者均需满足对应条件才能生效。
图片水平居中，最常用且兼容性最好的方案是给父容器设 text-align: center；如果图片需要脱离行内流或单独控制，就给 <img> 加 display: block 和 margin: 0 auto。别指望只写 margin: 0 auto 就能生效——漏掉 display: block 是翻车第一原因。
为什么 text-align: center 要写在父容器上，而不是 <img> 上
因为 text-align 是一个“容器属性”，它只对子元素里的**行内内容**起作用，<img> 默认就是行内元素，所以只要包它的父 <div> 或 <p> 设了 text-align: center，图片自然居中。
- 常见错误：给
<img>自己加style="text-align: center"→ 完全无效 - 父容器必须是块级（比如
<div>），且有明确宽度（width: 100%或未被浮动/绝对定位撑塌） - 如果父容器里还有文字，它们也会一起居中；多张
<img>会并排居中，想换行得额外加display: block或<br> - 兼容性极好，IE6 都支持
margin: 0 auto 生效的三个硬性条件
这个写法看着简单，但任意一条不满足，图片就纹丝不动：
-
<img>必须是块级：加display: block（默认是 inline，margin: auto对它无效） - 图片得有“可计算的宽度”：要么显式设
width: 300px，要么靠固有尺寸（如未设width但图片本身宽 200px）；设成width: 100%后margin: auto就失效 - 父容器不能是
display: flex或display: grid：这两种布局会接管子元素的 margin 行为，auto直接被忽略
示例：<img src="logo.png" style="display: block; width: 240px; margin: 0 auto;">
立即学习“前端免费学习笔记（深入）”；
Flex 布局做水平居中时，为什么图片没动
很多人写了 justify-content: center 却发现图片没变化，问题几乎都出在父容器没真正变成 flex 容器，或被其他样式覆盖：
- 必须把
display: flex加在**父容器**上，不是加在<img>上（<img>加了也没用） - 父容器如果原本是
<body>或全局<div>，加了display: flex会让所有直系子元素变 flex item，可能意外打乱原有结构 - 如果父容器高度塌缩（比如没设
height或min-height），justify-content: center仍有效，但视觉上可能看不出变化（尤其当它上面有其他内容时） - 检查是否被更高优先级的 CSS 覆盖，比如外层框架强制设了
text-align: left或用了!important
带链接的图片（<a><img></a>）怎么居中
链接本身是行内元素，包裹的 <img> 也是行内，所以两种方式都适用，但要注意行为差异：
- 用
text-align: center：给<a>的父容器设即可，整个链接区域水平居中，点击热区完整保留 - 用
margin: 0 auto：必须加在<img>上，并设display: block；此时<a>会塌缩成仅包裹图片的尺寸，热区不变，但若想让整个链接块可点击，得额外给<a>加display: block和同样样式 - 千万别只给
<a>加display: block却忘了<img>的display: block—— 否则图片仍按行内渲染，margin: 0 auto还是不生效
响应式场景下，记得给 <img> 加 max-width: 100% 和 height: auto，否则大图在小屏上会溢出或变形。
