margin: 0 auto 对 img 失效因 img 默认为行内元素，需配合父容器控制对齐；响应式居中应分离尺寸约束（max-width: 100%）与对齐行为（text-align 或 flex justify-content），避免样式冲突。
直接给 <img> 加 margin: 0 auto 不生效，是因为它默认是行内元素，且响应式尺寸（如 max-width: 100%）和居中行为必须协同控制——关键不在图片本身，而在父容器的渲染上下文和断点切换逻辑。
为什么 margin: 0 auto 在响应式场景下常失效
常见错误是只写：img { display: block; margin: 0 auto; }，却忽略两点：
- 父容器有
padding、width固定值或float，会破坏块级居中的计算基准 - 媒体查询里重复设置
img { width: 100% }，反而覆盖了原本的max-width约束，导致小屏下图片撑破容器，看起来“居中失败” - 图片被包裹在
<a></a>或古腾堡区块中时，外层元素可能自带display: inline-block或flex，干扰margin: auto的触发条件
用 text-align 切换对齐方式（兼容性最强）
这是最稳妥的响应式居中路径：对齐行为交给父容器，图片只管自适应尺寸。
- 基础样式只需一句：
img { max-width: 100%; height: auto; }—— 所有断点复用，不重复写 - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } } - 注意：别给
<img>单独设display: block，否则text-align对它无效（text-align只影响行内级内容）
用 Flex 布局实现响应式居中（现代推荐）
如果项目已支持 Flex，优先用容器控制，语义更清晰、扩展性更好。
- 父容器统一设：
.img-container { display: flex; justify-content: center; } - 断点只改
justify-content：@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 图片保持默认
inline行为，无需display: block或margin - 若需垂直居中，加
align-items: center并确保父容器有明确高度（或min-height） - 避免在 Flex 容器里同时用
text-align，两者混用易冲突
Zakra 主题或古腾堡编辑器里的特别处理
裸 <img> 标签在 Zakra 中大概率不居中，因为主题依赖 .wp-block-image.aligncenter 这类 class 规则。
- 别用 HTML 属性
align="center"（HTML5 已废弃，Zakra 不识别） - 在古腾堡中，选中图片 → 右上角「对齐方式」→ 点「居中」，但要确认该图片没嵌套在「列区块」或「组区块」里（这些容器默认不继承对齐）
- 后台检查：Zakra 主题定制器 → 「通用」→ 「内容排版」→ 关闭「禁用默认图像对齐样式」
- 万能兜底方案：加自定义 CSS 到「额外 CSS」区域：
img.centered { display: block; margin: 0 auto; max-width: 100%; height: auto; }，然后手动给图片加class="centered"
真正容易被忽略的是：响应式居中不是“让图片动”，而是“让容器在不同断点下表达不同的对齐意图”。一旦把尺寸约束（max-width）和行为控制（text-align / justify-content）拆开，维护成本就降下来了；反之，所有东西堆在 <img> 上，越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
