响应式图片自动居中核心在于容器而非图片本身：text-align: center（父容器）最轻量兼容，flex布局（display: flex; justify-content: center; align-items: center）最可靠二维居中，margin: 0 auto因依赖固定宽度在响应式下常失效。
响应式图片自动居中，核心不是“让图片自己居中”，而是让它的容器具备响应式行为并提供稳定的居中上下文。直接给 <img> 加 margin: 0 auto 或 text-align: center 很容易失效，尤其在不同断点下。
为什么 margin: 0 auto 在响应式场景下常失效
这个写法看似简单，但依赖三个硬条件：图片必须是 display: block、有可计算的宽度（不能是 width: 100% 或未设宽）、父容器不能是 flex/grid。而响应式图片通常用 max-width: 100% + height: auto，这就导致宽度不固定，margin: auto 失去参照。
- 常见错误：给
<img style="display: block; margin: 0 auto; max-width: 100%">—— 此时max-width不提供确定宽度，margin: auto实际不起作用 - 更隐蔽的问题：父容器用了
float、position: absolute或被插件注入了display: inline-block，都会切断块级居中逻辑 - 移动端缩放时，若父容器没设
width: 100%或含padding，视觉上也会偏移
text-align: center 要作用在父容器，且只管水平
这是兼容性最好、最轻量的水平居中方式，但必须明确：它只对行内子元素生效，且只控制水平方向。图片默认就是 inline，所以只要父容器设了 text-align: center，它就水平居中——前提是没被其他样式覆盖。
- 错误写法：
<img style="text-align: center">→ 完全无效，text-align不是<img>的属性 - 正确结构：
<div style="text-align: center"><img src="..."></div> - 注意干扰项：父容器若用了
font-size: 0（常见于清除 inline 间隙），会导致图片高度塌陷；若用了display: flex，text-align会被忽略 - 垂直方向不管：如果需要上下居中，得额外加
line-height、padding或套一层flex容器
用 flex 实现真正响应式的二维居中
这是现代项目中最可靠的选择，能同时处理窗口缩放、设备旋转、不同断点下的居中需求，关键是把逻辑放在容器层，而不是图片本身。
立即学习“前端免费学习笔记（深入）”；
- 必须写在父容器上：
display: flex; justify-content: center; align-items: center; - 父容器要有高度锚点：比如
min-height: 100vh（全视口高）、height: 500px或min-height: 300px；否则align-items: center没空间可居中，图片只会贴顶 - 图片自身只需：
max-width: 100%; height: auto;，不用设width或display - 媒体查询时，只改容器的
justify-content（如小屏center、大屏flex-start），不要重复定义图片尺寸
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <img src="photo.jpg" style="max-width: 100%; height: auto;"> </div>
响应式对齐切换要靠容器 class，别动图片样式
想实现“手机居中、平板左对齐、桌面右对齐”，关键不是给 <img> 写一堆 media query，而是控制其父容器的对齐行为。图片样式（max-width、height）应保持不变。
- 推荐结构：给父容器加 class 如
img-container，然后在 CSS 中统一管理 - 示例断点：
@media (max-width: 768px) { .img-container { text-align: center; } }（兼容旧环境）或@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }（flex 布局） - 切忌：每个断点都重写
img { width: ... }—— 这会破坏响应式连贯性，也增加维护成本 - Zakra 等主题用户注意：后台「图像对齐」选项可能被插件或自定义 CSS 覆盖，优先检查
.wp-block-image是否被意外设置了float或display: block且没配margin
最容易被忽略的一点：居中失败往往不是方法错了，而是图片被某个隐藏样式拉出了文档流——比如懒加载插件加了 position: relative、CSS-in-JS 注入了冲突的 display、或者父容器用了 overflow: hidden 切掉了外边距。排查时先临时禁用插件、清空自定义 CSS，再逐层检查 computed styles 里的 display 和 position。
