响应式图片居中需兼顾不拉伸、不变形、不溢出：margin: 0 auto 需 display: block 和可计算宽度；text-align: center 最轻量但仅限父容器内行内元素水平居中；flex 布局需注意容器影响范围与兼容性。
margin: 0 auto 能用，但必须配 display: block 和可计算宽度；text-align: center 更轻量，但只作用于父容器且仅限水平方向；别指望它自动解决溢出或垂直对齐问题。
为什么 margin: 0 auto 在响应式图片上常失效
这个写法本身没问题，但一配上 max-width: 100% 就容易翻车：浏览器无法确定“可用宽度”是否包含 padding 或 border，尤其当父容器用了默认的 box-sizing: content-box 时，margin: 0 auto 可能算出负边距或直接被忽略。
- 必须显式设
display: block，否则对默认inline的<img>无效 -
width不能是auto，但响应式里又不能写死像素值——改用max-width: 100%+height: auto是安全组合 - 父容器若用了
flex或grid，margin: 0 auto会被完全忽略 - 移动端 Safari 对
margin: auto在 flex 容器里的兼容性有历史 bug，建议回避
text-align: center 什么时候能用、什么时候会挂
这是最轻量的写法，但它的作用范围非常窄：只影响行内级子元素的水平对齐位置，对垂直方向毫无控制力，且一旦父容器高度塌陷（比如没设 min-height），图片就贴顶显示。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须写在父容器上，如
<div style="text-align: center"><img></div>，写在<img>上无效 - 父容器宽度必须明确，
float、display: inline-block或width: fit-content都可能导致居中失败 - 多张图片会并排居中；如需换行，得额外给
<img>加display: block - 它不解决图片本身尺寸超出容器的问题——还得配
max-width: 100%和height: auto
Flex 布局实现水平居中但不破坏垂直流
如果你只要水平居中，又不想让父容器变成完整 flex 容器（从而影响其他子元素），可以只用 justify-content: center，但必须确保父容器是 display: flex，且子元素未脱离文档流。
- 别在
或通用 wrapper 上直接加display: flex——它会让所有直系子元素变成 flex item，破坏原有结构 - 如果父容器已有其他块级子元素，推荐新建一个仅包裹图片的
<div>，再对其设 <code>display: flex -
justify-content: center不依赖图片宽度，响应式友好；但若同时需要垂直居中，就得补align-items: center和明确高度 - 旧 Android（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex
真正容易被忽略的是：响应式图片居中不是“加个样式就完事”，而是要同时守住“不拉伸、不变形、不溢出”三条线。哪怕用了最稳妥的 text-align: center，漏掉 max-width: 100%，小屏上照样裁图；用了 flex 却忘了父容器高度，图片就卡在顶部看不见。
