最稳的移动端图片水平居中方案是父容器设text-align: center，因img默认inline，该属性天然兼容所有移动端浏览器；需避免写在img上、父容器塌缩或font-size: 0导致图片消失。
移动端图片水平居中为什么text-align: center最稳
因为 img 默认是 inline 元素，而移动端浏览器（包括 iOS Safari 和 Android Chrome）对 text-align 的支持毫无例外，且不依赖父容器高度或 flex 上下文。它只管“把行内内容在行盒里居中”，天然适配视口缩放。
常见翻车点：
- 把
text-align: center写在<img>标签上 → 完全无效 - 父容器用了
float或display: inline-block导致宽度塌缩 → 居中偏移 - 父容器设了
font-size: 0（为清除 inline 间隙），但没给<img>单独加font-size: initial→ 图片消失
正确写法只需两处：
<div style="text-align: center;"> <img src="logo.png" style="max-width: 100%; height: auto;"> </div>
flex 实现全屏居中时，height: 100vh 和 min-height: 100vh 怎么选
在移动端，height: 100vh 有严重兼容问题：Safari（尤其 iOS 15+）会把地址栏高度算进 vh，导致页面底部被遮挡或滚动条意外出现；Chrome for Android 在地址栏收起/展开时也会触发重绘抖动。
立即学习“前端免费学习笔记（深入）”；
更安全的做法是用 min-height: 100vh，并配合容器内容自然撑高：
-
min-height: 100vh保证至少一屏，又允许内容超出时不截断 - 必须同时设
display: flex、justify-content: center、align-items: center，三者缺一不可 - 别在
<body>上直接写这些样式 —— 会把所有直系子元素（如多个<p>）都变成 flex item，破坏文档流
示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <img src="hero.jpg" style="max-width: 90vw; height: auto;"> </div>
图片尺寸上限怎么设才不拉伸、不溢出、不贴边
只写 max-width: 100% 在 iPhone 竖屏下常导致图片过小，在横屏或平板上又撑满整个屏幕，失去视觉呼吸感。
推荐组合约束：
-
max-width: 90vw：留出左右各 5% 边距，避免紧贴屏幕边缘 -
max-height: 80vh：防止长图在窄屏下顶天立地，压住其他内容 -
width: auto; height: auto：强制浏览器按原始宽高比缩放，禁用固定width或height - 避免
object-fit：它对普通<img>无效，只适用于<picture>或背景图
错误示范：width: 100% → 强制拉宽，破坏比例；正确应为 max-width: 90vw; width: auto;
媒体查询切换对齐方式时，为什么不能重复定义图片尺寸
很多开发者在每个断点里都写一遍 img { max-width: 100% }，结果样式层叠冲突，小屏下反而失效。
真正该做的，是把尺寸约束一次性写死在基础层，媒体查询只控制对齐行为本身：
- 基础样式统一设：
img { max-width: 90vw; height: auto; } - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } } - 若用 flex 布局，则对应改
justify-content，而非重写图片尺寸
最容易被忽略的是：移动端的“居中”不是图片自己的事，而是它所处容器是否提供了可计算、可响应、不被干扰的布局上下文 —— 尤其当页面混用 CMS 组件或第三方插件时，外层 div 可能悄悄加了 float 或 position: relative，无声破坏居中逻辑。
