响应式图片居中需同时满足三条件：任意屏幕下居中、不溢出容器、缩放时保持宽高比；推荐用display: block + margin: 0 auto + max-width: 100% + height: auto方案。
响应式图片居中不是加个 text-align: center 就完事——它必须同时满足三个条件：在任意屏幕宽度下保持居中、不溢出容器、缩放时维持宽高比。Zakra、Bootstrap 等主流主题或框架的默认行为常会干扰这个目标，尤其当图片被嵌套在古腾堡区块或自定义容器里时。
为什么 text-align: center 有时失效
因为 <img> 默认是行内元素，text-align 只对它的父容器生效，且前提是该父容器没被更高优先级样式覆盖（比如 display: flex 或插件注入的 float: left）。Zakra 主题对 .wp-block-image 容器设了居中样式，但裸 <img> 直接写在编辑器里，就掉出这个作用域了。
- 检查图片是否包裹在
<p>或<div class="wp-block-image">中；如果不是，text-align很可能不触发 - 禁用主题「禁用默认图像对齐样式」选项（Zakra → 定制器 → 通用 → 内容排版）
- 避免用 HTML5 已废弃的
align="center"属性，Zakra 完全不识别它
margin: 0 auto 配合 display: block 的可靠写法
这是兼容性最好、语义最干净的方案，适用于所有现代浏览器，包括 IE11。关键点在于：必须显式设 display: block，否则 margin: 0 auto 对行内元素无效；同时保留 max-width: 100% 和 height: auto 才能响应式缩放。
- 直接在
<img>标签上写内联样式：<img src="photo.jpg" style="display: block; margin: 0 auto; max-width: 100%; height: auto;"> - 若用类名控制，CSS 应写为：
.responsive-center { display: block; margin: 0 auto; max-width: 100%; height: auto; } - 别加
!important——Zakra 原生样式权重足够，硬加反而在移动端破坏max-width行为
Flexbox 实现水平+垂直居中（需固定容器高度）
当图片要严格居中在某个有明确高度的区域（比如 banner、卡片封面），display: flex 是最可控的方式。注意：它依赖父容器设置高度（如 height: 400px 或 min-height: 100vh），否则垂直居中无意义。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex; justify-content: center; align-items: center; - 图片本身无需额外样式，但建议仍加
max-width: 100%; height: auto;防止撑破 - 示例：
<div style="display: flex; justify-content: center; align-items: center; height: 300px; background: #eee;"><img src="icon.png" style="max-width: 100%; height: auto;"></div> - 如果父容器高度由内容撑开（比如普通段落），
align-items: center不会产生垂直居中效果
响应式图片撑破容器？先管尺寸，再管居中
Zakra 和 Bootstrap 的 .img-responsive 或 max-width: 100% 只控制缩放比例，不控制原始尺寸。一张 2000px 宽的图，在手机上仍会横向溢出——这不是居中失败，而是“居中了一个过宽的图”。
- 上传前压缩并限制原图最大宽度（推荐 ≤1200px），工具可用 Squoosh 或 ImageOptim
- 在 Zakra 后台检查「图像对齐」是否被插件覆盖（常见于懒加载插件，会重写
class导致.wp-block-image.aligncenter失效） - 如果必须用超大图，可在 CSS 中加
overflow: hidden到父容器，但这是妥协方案，会裁剪而非缩放
真正难的不是让图片居中，而是判断它该在哪一级容器里居中：是整个页面、一个区块、还是某段文字旁边的图文混排区域。不同层级的居中逻辑互不兼容，混用就会冲突。动手前先 inspect 元素，看清当前 DOM 结构和已生效的 CSS 规则，比盲目套代码更省时间。
