真正响应式双向居中需用flex：父容器设display: flex、justify-content: center、align-items: center，并有明确高度（如min-height: 100vh），图片加max-width: 90vw、max-height: 80vh、width: auto、height: auto。
单张响应式图片要真正居中，必须同时解决水平、垂直、缩放三件事；只写 text-align: center 或只加 margin: 0 auto 都会漏掉关键环节。
为什么 margin: 0 auto 单独加在 <img> 上没用
因为 <img> 默认是 display: inline，而 margin: auto 对行内元素完全无效。就算加了，浏览器也当没看见。
- 必须显式设
display: block（或inline-block） - 必须有可计算的宽度：比如
width: 300px；max-width: 100%不行，它会让浏览器无法算出“剩余空间” - 父容器不能是
flex或grid，否则 margin 行为被接管 - 它只管水平，垂直方向仍贴顶——响应式场景下视口高度变化频繁，这点尤其致命
用 text-align: center 最轻量，但只适用于水平居中
这是兼容性最好、代码最短的水平居中方案，原理是让父容器把图片当文字排版。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须写在父容器（如
<div>）上，写在 <code><img>自身上完全无效 - 父容器建议不设固定宽，或设
width: 100%，避免因float或inline-block导致宽度塌陷 -
<img>自身加max-width: 100%和height: auto，防止窄屏溢出、宽屏拉伸 - 如果父容器用了
font-size: 0（常见于清除 inline 间隙），记得给<img>单独加font-size: initial，否则图片可能消失 - 父容器必须设
display: flex、justify-content: center、align-items: center——三者缺一不可 - 父容器必须有明确高度参照：
height: 100vh（全屏高）或min-height: 50vh；仅靠height: 100%很可能无效，因为上级容器未必有显式高度 -
<img>必须加max-width: 90vw（留边距）+max-height: 80vh+width: auto+height: auto，否则大图会溢出、小屏会拉伸 - 别直接在
上设display: flex，否则所有直系子元素（比如多个<p></p>）都会变成 flex item，破坏原有文档流
真正响应式双向居中，必须用 flex + 明确高度
这是目前唯一能稳定兼顾水平、垂直、缩放三者的方案，但漏掉任一条件都会“看起来居中，实则偏移”。
最容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个 height 是从哪来的”。如果容器高度由内容撑开（比如图片本身撑高），align-items: center 就失去作用，图片必然贴顶。真正可控的做法，是让容器高度独立于图片内容，比如用 min-height: 100vh 或配合固定 aspect-ratio 的 wrapper。
