text-align: center写在父容器上最轻量有效，因<img>默认行内元素，需父容器将其当文字排版；margin: 0 auto需同时满足display: block、有确定宽度、父容器非flex/grid三条件。
直接给 <img> 加 margin: 0 auto 不生效，是因为它默认是行内元素；真正起效的水平居中，必须靠父容器控制或显式转块级。
用 text-align: center 最轻量，但只对父容器生效
这是兼容性最好、代码最少的方案，适合图文混排、banner 图、页眉 logo 等场景。关键不是“图片自己居中”，而是让父容器把图片当文字来排版。
-
text-align: center必须写在父容器（如<div>）上，写在<img>标签里完全无效 - 父容器不能是
float、position: absolute或display: flex/grid，否则会覆盖该属性 - 如果父容器宽度为 0（比如空
<div>且没设宽），也没空间可居中——建议加width: 100%或留内容撑开 - 响应式下依然可靠，无需额外 media query，
max-width: 100%和height: auto可直接加在<img>上防拉伸
示例：<div style="text-align: center"><img src="logo.png" style="max-width: 100%; height: auto;"></div>
用 margin: 0 auto 需满足三个硬条件
这个组合看似简单，但漏掉任一条件都会失败，新手最常卡在第一步。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须加
display: block（或inline-block），否则margin: 0 auto对行内元素无效 - 图片得有可计算的宽度：固有尺寸（如原始 300px）、显式
width: 300px，或width: fit-content；width: 100%或max-width: 100%会让auto失去参照 - 父容器不能是
display: flex或display: grid，否则 margin 行为被布局模型接管
示例：<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto; max-width: 100%;">（注意：这里 max-width 是兜底，不参与居中计算）
响应式对齐切换别重写图片尺寸，改父容器的 text-align 就行
小屏居中、中屏左对齐、大屏右对齐——重点不在图片本身，而在父容器的对齐策略是否可被 media query 覆盖。
- 错误做法：每个断点都重复写
img { width: 100% }，既冗余又难维护 - 正确思路：只用一个 class 包裹图片，用 media query 控制该容器的
text-align值 - 若用 flex 布局，则对应改
justify-content：如flex-start（左）、center（中）、flex-end（右） - 避免在不同断点里混用
text-align和justify-content，容易冲突
示例：@media (min-width: 769px) { .img-container { text-align: left; } }
真正容易被忽略的是父容器的“行为一致性”：哪怕你用了最稳妥的 text-align: center，只要父容器被 float、position: absolute 或其他布局属性干扰，居中就会失效——检查时优先看父容器，而不是图片样式本身。
