图片居中失效主因是父容器未正确设置或被框架覆盖：text-align仅对行内元素有效，margin:0 auto需图片为块级且父容器有明确宽度，flex容器下须用justify-content/align-items；务必加max-width:100%和height:auto防溢出。
直接用 text-align: center 或 margin: 0 auto 很可能失效——不是你写错了，而是图片没被正确“框住”，或浏览器在响应式断点下覆盖了你的样式。
为什么 text-align: center 在响应式页面里经常失灵
这个属性只对行内元素（比如默认的 <img>）生效，但它依赖父容器的宽度和文本流行为。一旦父容器没设宽度、用了 flex 或 grid、或者被框架（如 Kubio/SeedProd）注入了隔离 CSS，text-align 就会被忽略或压不住高优先级规则。
- 常见现象：桌面端居中，手机预览时突然左对齐，甚至图片溢出容器
- 根本原因：父容器在媒体查询里被重设为
display: flex，而text-align对 flex 容器无效 - 别在
<img>上加align="center"——这个 HTML 属性早已废弃，现代浏览器根本不解析 - 真正要检查的是：父容器是否设置了
width？是否被框架自动加了max-width: 100%但没配box-sizing: border-box？
margin: 0 auto 不生效的三个隐藏条件
这个方案看似简单，但必须同时满足三个条件才起作用：图片是块级元素、父容器有明确宽度、父容器未设 float 或 position: absolute。
- 漏掉
display: block是最常见错误：<img src="a.jpg" style="margin: 0 auto;">永远不会居中 - 父容器如果没设
width（比如<div>默认 100% 宽），margin: 0 auto仍会生效；但如果父容器被flex包裹，它就退化为普通子项，不再触发块级居中逻辑 - 在 SeedProd 或 Kubio 这类构建器里，
<p>包裹的图片常被自动加上float: left，此时必须先清除浮动：img { float: none !important; } - 移动端慎用
!important堆砌——它可能让max-width: 100%失效，导致图片在小屏上横向滚动
Flexbox 居中才是响应式场景下的稳定解法
用 display: flex 替代手工对齐，不是为了炫技，而是因为它天然无视视口变化、不依赖行高、也不吃内联空白和基线偏移的亏。
立即学习“前端免费学习笔记（深入）”；
- 单图水平+垂直居中：
<div style="display: flex; justify-content: center; align-items: center; height: 300px;"><img src="x.jpg"></div> - 图文混排防错位：给父容器加
display: flex; align-items: center;，再给图片加vertical-align: middle反而多余——flex 已接管对齐 - 避免
flex-direction: row在小屏撑开容器：加flex-wrap: wrap或用媒体查询切为column - Kubio/SeedProd 用户注意：HTML 模块比富文本模块更容易接管 flex 样式，优先把图片塞进「自定义 HTML」区块
图片本身尺寸失控才是错位根源
很多“居中异常”其实是图片太大、拉伸、或加载前占位塌陷导致的视觉错觉。修复对齐前，先稳住图片自身行为。
- 所有
<img>必须带max-width: 100%和height: auto，否则缩放时必然溢出或变形 - 别用
width="300"或height="200"这类内联属性——它们会硬覆盖 CSS，且无法响应视口 - 加载抖动问题：未声明宽高的图片在加载完成前高度为 0，拖动文字位置。解决方案是加占位：
style="aspect-ratio: 4/3; width: 100%;"，或用object-fit: contain配合固定容器 - 在表单旁、卡片里等紧凑场景，图片高度应匹配上下文——比如用
height: 1.5em而非像素值，避免因字体缩放导致错位
真正麻烦的从来不是“怎么写居中”，而是你没意识到：图片还没加载完、父容器被框架悄悄改写了 display、或者 line-height 正在偷偷影响 vertical-align 的计算结果。
