图片居中需按场景选择方案：水平居中用text-align: center（父容器）；水平+垂直居中用flex或grid，但父容器必须有明确高度。
图片居中不是“加一个属性就行”的事，得看你要的是水平居中、垂直居中，还是两者都要，还得看图片在什么上下文中——是单独一张图、在段落里、在卡片里，还是整个视口居中。没有万能代码，但有最适配场景的写法。
text-align: center 只管水平居中，且必须作用在父容器上
这是最轻量、兼容性最好的方式，适合单张图放在 <div> 或 <p> 里，只要求水平居中。
- 给父容器（比如
<div>）加style="text-align: center;"，<img>本身不用改任何样式 -
<img>默认是行内元素，所以它会像文字一样响应text-align - 别给
<img>自己加text-align: center—— 这个属性对自身无效 - 如果父容器宽度不明确（比如被
float或display: inline-block拉窄），居中可能失效
示例：<div style="text-align: center;"><img src="logo.png" alt="logo"></div>
margin: 0 auto 需要 display: block + 明确宽度
这是让图片“作为块”来居中的方式，语义清晰，但漏掉任一条件就完全没反应。
立即学习“前端免费学习笔记（深入）”；
- 必须给
<img>加display: block，否则margin: 0 auto对行内元素无效 - 图片要有明确宽度（通过
width属性或 CSSwidth设置），否则浏览器无法计算“可用空间”，auto就没意义 - 只控制水平方向；垂直方向完全不生效，别指望它把图片顶到中间
- 响应式场景下，用
max-width: 100%替代固定width时，记得同步设height: auto防止拉伸
示例：<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto;">
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
flex 布局实现水平+垂直居中，但父容器高度不能塌
这是目前最可控、最常用的双向居中方案，但也是翻车最多的地方——很多人写了 justify-content: center 却忘了 align-items: center 和容器高度。
- 必须作用在父容器上，不是
<img>自身 -
display: flex+justify-content: center+align-items: center缺一不可 - 父容器必须有明确高度参照：用
height: 100vh（全视口）、min-height: 200px或其他固定值；否则align-items: center无空间可居中 - 别直接在
<body>上加display: flex—— 它会让所有直系子元素变成 flex item，破坏原有结构 - 移动端旧 Android（4.4 以下）需加
-webkit-前缀
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="photo.jpg" style="max-width: 100%; height: auto;"></div>
place-items: center 是现代最优解，但不兼容 IE
一行 CSS 就能同时搞定水平和垂直居中，语义最干净，前提是目标环境支持。
- 必须用在父容器上，且该容器需设
display: grid（不是 flex） -
place-items: center等价于justify-content: center+align-items: center - 同样依赖父容器有明确高度，如
height: 100vh；否则垂直方向无参照 - Chrome/Firefox/Safari/Edge ≥ 2022 支持良好，IE 完全不支持
- 比 flex 更简洁，但灵活性略低（比如不好控制子元素顺序或换行）
示例：<div style="display: grid; place-items: center; height: 100vh;"><img src="logo.png" alt="logo"></div>
真正容易被忽略的点是：垂直居中永远依赖“容器高度有定义”。不管用 flex、grid 还是绝对定位，只要父容器高度是 auto 且内容为空或仅含行内元素，它就会塌缩成 0，居中就失效。这不是 bug，是 CSS 盒模型的基本逻辑。
