最稳解法是display: flex+justify-content: center+align-items: center，但需同时满足父容器设flex、有明确高度（如min-height: 300px）、图片在文档流中且含max-width: 100%; height: auto。
直接用 display: flex + justify-content: center + align-items: center 是目前最稳的解法，但必须配齐父容器高度、图片尺寸约束和文档流完整性——缺一不可。
为什么 margin: 0 auto 单独写没反应
因为 <img> 默认是行内元素，margin: auto 对它完全无效。就算加了 display: block，也只解决水平居中；垂直方向仍贴顶，且在 flex 容器里会被直接忽略。
- 写了
margin: 0 auto但没加display: block→ 样式静默失效 - 父容器用了
display: flex或display: grid→margin被接管，不起作用 - 图片带了内联
width或height属性（如<img width="600">）→ 覆盖max-width: 100%，导致缩放失效
display: flex 居中必须满足的三个硬条件
很多人写了 justify-content: center 和 align-items: center 却没效果，问题几乎全出在这三点上：
- 父容器没设
display: flex（只给<img>加没用） - 父容器高度塌陷：比如只写了
width: 100%，没设height或min-height→align-items: center失去垂直参照 - 图片脱离文档流：加了
position: absolute、float，或被包裹在inline-block容器里 → flex 规则跳过该元素
正确写法示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"> <img src="photo.jpg" style="max-width: 90vw; height: auto;"> </div>
max-width: 100% 和 height: auto 为什么不能少
这两条是响应式缩放的底线组合：前者防溢出，后者保比例。漏掉任一个，图片就会拉伸、塌陷或撑破布局。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只写
width: 100%→ 小图被强行拉大、模糊，大图在窄屏下溢出 - 漏掉
height: auto→ IE9–11 可能渲染为高度 0，Safari 在 flex 容器中可能计算异常 - 父容器没设
box-sizing: border-box且含padding或border→ 实际宽度超限，“100%”变成 100% + padding，图片溢出
媒体查询切换对齐方式时别碰图片样式
响应式对齐的本质是“按断点改容器行为”，不是反复重写 <img> 的尺寸。常见错误是在每个 @media 里都塞一遍 img { width: 100% }，既冗余又易冲突。
- 基础层统一设好图片约束：
img { max-width: 100%; height: auto; display: block; } - 对齐逻辑交给父容器：
@media (max-width: 768px) { .img-container { text-align: center; } }（兼容旧环境）或{ display: flex; justify-content: center; }（现代） - 若父容器已用 flex 布局，就别再混用
text-align，否则会被忽略
真正容易被忽略的是父容器高度来源——100vh 看似方便，但遇到 sticky header 或 footer 时会遮挡内容；更稳妥的做法是用 min-height: 300px 或根据区块实际内容设定最小高度。
