html图片默认左对齐，水平居中首选margin:0 auto（需display:block+明确宽度），双向居中推荐flex布局（父容器设display:flex、justify-content:center、align-items:center并设定高度），text-align:center仅适用于行内场景，绝对定位+transform适用于脱离文档流需求。
图片在 HTML 里默认左对齐，不加任何样式就是贴左显示；想水平+垂直居中，必须显式干预——align="center" 已废弃，<center></center> 标签被移除，纯靠 HTML 标签无法真正居中。
用 margin: 0 auto 实现水平居中（兼容性最好）
这是最稳妥的水平居中方案，但只管左右，不管上下。关键不是“加 margin”，而是让浏览器能算出左右空隙。
-
display: block必须加，否则img是行内元素，margin: 0 auto不生效 - 图片得有明确宽度（比如
width: 300px或max-width: 100%），否则auto没参照，可能撑满父容器 - 别同时设
float或position: absolute，会破坏文档流，让margin: auto失效 - 父容器不能是
display: flex或display: grid，否则会覆盖块级居中逻辑
示例：<img src="logo.png" style="max-width:90%">
用 display: flex 同时水平+垂直居中（现代项目首选）
Flex 是目前最直观、最可控的双向居中方式，但容易卡在父容器配置上——很多人只写 justify-content: center，忘了它根本不起作用。
- 必须作用在父容器上，不是
<img>自身：给包裹它的<div> 加 <code>display: flex -
justify-content: center控制水平，align-items: center控制垂直，两个都得写 - 父容器要有高度（
height或min-height），否则align-items: center看不出效果 - 旧版 Android 浏览器（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex - 只对父容器生效，
text-align: center写在<img>上完全没用 - 适用于图片和文字混排、或纯图文段落里单图居中
- 如果父容器用了
font-size: 0（常见于清除 inline 间隙），图片可能消失或错位 - 父容器不能是
display: flex/display: grid/float/position: absolute，否则text-align会被忽略 - 父容器必须设
position: relative（或其他非static值），否则absolute会一直往上找直到 - 只写
left: 50%; top: 50%是错的——那是把图片左上角拉到中心，得补transform: translate(-50%, -50%)才真居中 - 响应式缩放时比写死
margin-left更可靠，transform始终基于自身尺寸计算 - 慎用于正文流中，尤其配合
float或flex的布局里，容易引发重叠或错位
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="icon.png"></div>
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 text-align: center 居中（仅限行内场景）
这个方法简单，但限制最多：它不操作图片本身，而是靠父容器把图片当文字来“排版”。一旦图片被设成块级或浮动，立刻失效。
示例：<div style="text-align: center;"><img src="thumb.jpg"></div>
用 position: absolute + transform 强制锚点居中（脱离文档流场景）
适合模态框、加载图标、遮罩层上的 logo 这类需要脱离正常布局流的场景。代价是它不再占位，后面的内容会“塌”上来。
示例：<div style="position: relative; height: 400px;"><img src="logo.png" style="max-width:90%"></div>
真正难的不是选哪种方法，而是判断当前 DOM 结构和已有 CSS 是否已隐式改变了图片的 display 类型、定位方式或父容器的布局上下文——很多“居中失败”其实是因为某一层祖先悄悄加了 display: flex 或 float: left，把原本有效的 margin: auto 给废掉了。
