移动端图片居中需用容器建立稳定上下文：text-align: center（父容器设，仅水平）或display: flex（需-webkit前缀、min-height防塌陷），margin: 0 auto常因img未设display: block、父容器宽不可靠或图片有固定width而失效。
移动端图片居中不是“加个 margin: 0 auto 就完事”，而是必须用容器建立稳定、可缩放的居中上下文——text-align: center 和 display: flex 都能用，但各自有明确的生效条件和兼容雷区。
为什么 margin: 0 auto 在手机上经常不生效
这个写法在桌面端看着正常，一到 iOS 或 Android 上就靠左、溢出或顶部贴死。核心原因有三个：
-
img没加display: block—— 移动端浏览器对 inline 元素的行盒计算更严格，margin: 0 auto直接被忽略 - 父容器宽度不可靠：比如用了
float、position: absolute，或没设width: 100%，导致auto无参照可分 - 图片本身带固定
width（如width: 300px）—— 小屏下强制撑开，浏览器放弃居中逻辑，改为左对齐
正确做法是：去掉固定 width，改用 max-width: 100% + height: auto，再确保父容器能自然撑开。
display: flex 居中在 iOS/Android 上的硬性要求
现代移动端基本都支持 display: flex，但两个关键点漏掉一个，图片就会“看起来写了居中，实际不动”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（iOS 9–11）必须加
display: -webkit-flex前缀，只写标准写法会完全失效 - 父容器必须有可计算的交叉轴长度，否则
align-items: center无效——表现为图片水平居中但紧贴顶部；推荐用min-height: 200px或min-height: 100vh，而不是height: 100vh（后者在内容超长时会截断） - 如果父容器是
<body>或<section>这类语义化标签，且内部混有其他块级元素（如多个<p>），display: flex会让所有子元素变成 flex item，布局全乱
稳妥写法示例：
<div style="display: -webkit-flex; display: flex; justify-content: center; align-items: center; min-height: 200px;"> <img src="logo.png" style="max-width: 100%; height: auto;"> </div>
text-align: center 的安全用法与边界
它是最轻量、兼容性最好的方案，但仅适用于纯水平居中，且依赖图片保持默认 inline 行为：
- 必须写在父容器（如
<div>）上，写在<img>标签里完全无效 - 父容器不能是
display: flex或display: grid—— 这两种布局会接管对齐逻辑，text-align被忽略 - 若父容器用了
font-size: 0（常见于清除 inline 间隙），需给img单独加font-size: initial，否则图片可能高度塌缩 - 它不管垂直方向，如果需要上下居中，得在外层再套一层 flex 容器，或用
line-height/padding-top手动调
基础结构示例：
<div style="text-align: center; width: 100%;"> <img src="logo.png" style="max-width: 100%; height: auto;"> </div>
真正容易被忽略的是：图片是否脱离文档流。只要加了 position: absolute、float 或父容器用了 display: grid，上面所有居中逻辑都会静默失效——调试时先检查开发者工具里 img 的 computed display 和 position 值，比反复改样式更省时间。
