图片居中偏移主因是父容器缺失宽度约束、脱离文档流或对齐机制被覆盖；需确保父容器有明确宽度、非浮动/绝对定位，图片设display:block或用text-align:center，Flex布局须三要素齐全且无干扰。
图片居中总偏向一边，基本就是父容器没“管住”它——不是图片样式写错了，而是它所在的上下文缺失宽度约束、脱离文档流，或对齐机制被覆盖。
父容器没设宽度或塌陷了
这是最常见原因：div 默认 width: auto，如果里面只有 img 且没其他内容或清除浮动，它可能塌缩为 0 宽，导致 max-width: 100% 实际参照整个视口，图片缩放后就贴左/右边缘。
- 给父容器加明确宽度上下文：比如
max-width: 1200px+margin: 0 auto - 避免仅靠
text-align: center居中却忽略父容器是否“有宽”——检查 computed styles 中的width是否为预期值 - 若父容器用了
float或position: absolute，它已脱离文档流，margin: auto和text-align都会失效
img 是行内元素，margin: 0 auto 单独写无效
img 默认是 display: inline，而 margin: auto 对行内元素水平方向完全不生效。很多人写了 margin: 0 auto 没反应，就以为是 CSS 写错了，其实是前提条件不满足。
- 必须配合
display: block（或inline-block），否则margin: auto静默忽略 - 但注意：
max-width: 100%下，margin: 0 auto仍可能因“无剩余空间”而表现异常——此时优先用父容器text-align: center - 更稳妥的写法：
<div style="text-align: center;"><img src="x.jpg" style="max-width: 100%; height: auto;"></div>
Flex 布局里 justify-content: center 失效
Flex 看似万能，但一旦父容器没写全、子项干扰或溢出，就会“看起来居中失败”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 缺一不可的三要素：
display: flex、justify-content: center、父容器有可计算宽度（如width: 100%或max-width） - 图片自身不能设
float，否则脱离 flex 流；也不能有隐藏空白字符（如换行、空格）在<img>标签前后，会被当作 text node 参与排列 - 如果图片
max-width: 100%但实际尺寸超父容器，视觉上仍是“卡在左边”——这时要加overflow: hidden或限制父容器max-width
移动端偏移常因视口或盒模型干扰
桌面端正常、手机上偏移，大概率不是居中逻辑错，而是渲染上下文变了。
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1.0">已存在，否则页面会以桌面宽度渲染，再缩放导致布局错乱 - 父容器若有
padding但没设box-sizing: border-box，实际内容宽度会小于预期，居中基准偏移 - 旧 Android（4.4 及以下）需补
display: -webkit-flex，否则 flex 不生效，退化为行内行为
真正麻烦的点不在“怎么写居中”，而在“谁在干扰居中”——每次偏移，先查父容器的 display、width、position，再看 img 的 display 和周围是否有浮动/绝对定位残留。这些细节不显眼，但改一个就能让图片稳住。
