图片margin: 0 auto不居中，主因是未设display: block或宽度不可计算；text-align: center需父容器有宽度；flex居中需父容器设min-height；响应式溢出须用max-width: 100%并约束父容器。
图片加margin: 0 auto不居中？先确认 display 和 width
直接给 <img> 加 margin: 0 auto 失效，几乎总是因为两个硬性条件没满足：display: block 缺失，或宽度不可计算。浏览器只有在元素是块级、且有明确宽度（比如 width: 300px 或固有尺寸）时，才会把左右 margin 平分剩余空间。
常见错误包括：
- 只写
margin: 0 auto，没设display: block - 写了
max-width: 100%却没配width: auto，导致宽度变成auto，margin: auto失效 - 父容器用了
display: flex，它会接管子项的 margin 行为，margin: 0 auto被忽略
稳妥写法：<img src="a.jpg" style="display: block; width: 100%; max-width: 600px; margin: 0 auto;">。其中 width: 100% 让它继承父宽，max-width 设上限，margin: 0 auto 才真正起作用。
用 text-align: center 居中，但父容器必须“有宽度”
text-align: center 是最轻量的水平居中方式，但它只对父容器生效，且只影响行内级子元素——而 <img> 默认就是行内元素，所以不用改 display。
立即学习“前端免费学习笔记（深入）”；
但它极易因父容器“没宽度”而失效：
- 父
<div>没设width或max-width，又没内容撑开，实际宽度为 0，居中无从谈起 - 父容器被
float或position: absolute脱离文档流，宽度计算异常 - 混入了
<div>这类块级子元素，它们不受text-align控制，视觉上会破坏居中感
安全写法：<div style="width: 100%; text-align: center;"><img src="b.jpg"></div>。如果父容器本身是全宽块，width: 100% 可省略；但若它嵌套在 flex 或 grid 里，显式声明更可靠。
实现水平 + 垂直居中，display: flex 必须配高度
要让图片在容器里“正中间”，display: flex 是现代项目首选，但仅写 justify-content: center; align-items: center 不够——align-items 依赖交叉轴（通常是高度）有可用空间。
典型失效场景：
- 父容器没设
height或min-height，高度塌缩为 0，图片只能水平居中、垂直贴顶 - 父容器是空的，又没设
min-height，computed height 为 0 - 图片加了
position: absolute或float，已脱离 flex 流，对齐规则不适用
正确组合：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="c.jpg" style="max-width: 100%; height: auto;"></div>。注意：min-height 比 height 更安全，避免内容溢出时遮挡。
响应式缩放时图片溢出？关键在 max-width: 100% 和父容器约束
很多“响应式图片不居中”其实是“图片溢出容器后被截断或横向滚动”，根源不在居中逻辑，而在宽度失控。核心问题常出在父容器用了固定宽度（如 width: 1000px），窄屏下无法收缩，导致子图超出视口。
修复要点：
- 把父容器的
width: 1000px改成max-width: 1000px，并保留margin: auto，让它宽屏居中、窄屏自适应 - 子容器（如包裹图片的
<div class="divbox3">）宽度从固定值改为width: 100%，确保继承当前父宽 - 图片自身只需
style="max-width: 100%; height: auto"——max-width防溢出，height: auto保比例，别再额外加width: 100%，否则可能冲突
最容易被忽略的一点：如果父容器有 padding，记得加 box-sizing: border-box，否则 max-width: 100% 会算错可用宽度。
