图片居中失效主因是主题CSS覆盖，如Astra/Zakra强制设inline-block或float；margin:0 auto仅对块级元素有效，需检查float、定位及父容器text-align是否被覆盖；Flex布局最可靠。
直接给 margin: 0 auto 或父容器设 text-align: center 却不生效，大概率不是代码写错了，而是被主题或插件的 CSS 规则覆盖了。
为什么 text-align: center 在 Astra / Zakra / Orfeo 等主题里失效
这些主题默认会对 .entry-content img、.wp-block-image 或 .portfolio-item img 强制设置 display: inline-block、vertical-align: middle，甚至加 float: left —— 这些都会干扰 text-align 的作用范围。
- 检查开发者工具的 Computed 面板，看图片外层容器的
text-align值是否真为center；如果不是，说明被更高权重的规则覆盖了 - Astra 的「Content Alignment」开关会批量重置子元素对齐，关掉它比硬加
!important更稳妥 - Zakra 主题中，
.wp-block-image默认有width: 100%，如果原图超宽（比如 2000px），它会在小屏上“居中地溢出”，看起来像没居中
margin: 0 auto 不起作用的三个常见原因
这个写法只对块级元素有效，但前提是它没被其他样式“拉回”行内流。
- 图片被设了
float: left或float: right：清除浮动或直接删掉 float 声明 - 父容器用了
position: absolute或position: fixed：脱离文档流后margin: auto失效，改用left: 50%; transform: translateX(-50%) - 图片本身有
max-width: 100%且父容器宽度不足：此时margin: 0 auto仍生效，但视觉上是“居中一个窄图”，容易误判为失败
用 Flex 布局绕过样式冲突最可靠
Flex 不依赖父容器的 text-align，也不吃 float 和 vertical-align 的影响，适合对抗主题 CSS。
- 给图片包一层
，然后加：.img-flex-center { display: flex; justify-content: center; } - 如果还要垂直居中（比如在固定高容器里），补上
align-items: center; height: 300px; - Elementor 用户优先写：
.elementor-widget-image .elementor-image img { display: block; margin: 0 auto; }——比改 wrapper 的text-align更稳定
响应式对齐切换别重复写图片尺寸
媒体查询的目标是「对齐行为」，不是「图片大小」。很多人在每个断点里都写一遍 img { width: 100% }，这既冗余又容易引发盒模型冲突。
- 统一设好基础样式：
img { max-width: 100%; height: auto; display: block; } - 只在媒体查询里切换父容器的对齐方式：
@media (max-width: 768px) { .img-container { text-align: center; } }<br>@media (min-width: 769px) { .img-container { text-align: left; } } - 若用 Flex，就换
justify-content：@media (min-width: 1025px) { .img-flex-center { justify-content: flex-end; } }
真正难处理的不是「怎么居中」，而是搞清哪条 CSS 规则正在偷偷覆盖你写的那行 text-align: center。打开开发者工具，从 computed styles 往上逐层点开 matched CSS rules，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
