手机网页响应式图片居中首选text-align: center（写在父容器上），因它不依赖图片自身样式且适配宽度变化；若需垂直居中，父容器须设display: flex、justify-content: center、align-items: center及min-height: 100vh。
手机网页响应式图片居中，核心不是“让图片自己动”，而是让父容器在小屏下仍能提供稳定、可计算的布局上下文——text-align: center 最轻量可靠，display: flex 最可控但必须配齐三要素。
为什么 margin: 0 auto 在手机上经常失效
它对 <img> 默认无效，因为图片是 inline 元素；强行加 display: block 后，若没设固定 width（比如只写 max-width: 100%），浏览器无法算出“剩余空间”，margin: auto 就失去参照。手机端视口窄、缩放频繁，这个缺陷会被放大。
-
<img src="x.jpg" style="max-width:90%">→ 多数机型下纹丝不动 - 加了
width: 200px能生效，但破坏响应式，窄屏溢出 - 父容器用了
float、position: absolute或display: flex，会直接接管margin行为
text-align: center 是手机端最稳的水平居中方案
它不操作图片本身，而是让父容器把图片当文字排版，天然适配宽度变化。只要父容器宽度随视口缩放，居中就一直有效。
- 必须写在父容器上：
<div style="text-align: center;"><img ...></div>，写在<img>标签里完全无效 - 图片自身加
max-width: 100%和height: auto，防止窄屏撑破、宽屏拉伸 - 若父容器有
font-size: 0（常见于清除 inline 间隙），需给<img>单独加font-size: initial，否则图片可能消失 - 兼容性覆盖所有安卓/iOS 主流 WebView，包括微信内置浏览器
需要垂直居中？display: flex 必须三件套齐备
手机竖屏高度变化大，只写 justify-content: center 会导致图片水平居中但贴顶；align-items: center 没有高度参照就等于“在 0px 高里居中”。
- 父容器必须设
display: flex+justify-content: center+align-items: center - 父容器高度不能靠内容撑开，得有明确参照：推荐
min-height: 100vh（比height: 100vh更安全，避免长图+文字时滚动条卡住图片） - 图片加
max-width: 90vw（留边距）+height: auto，别用width: 100%，否则宽屏下失比例 - 别直接在
上设display: flex，会把所有<p></p>、<h2></h2>都变成 flex item，破坏文档流
真正容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个高度是否随视口真实可计算”。很多翻车案例里，flex 写全了，但父容器高度来自一个未设 min-height 的空 <div>，结果在 iPhone Safari 下图片始终贴顶。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
