最稳、最通用的做法是给加display: block和margin: 0 auto；若图片混排在文本流中，优先用父容器text-align: center。因默认为行内元素，margin: auto对其无效，必须显式设为块级才能触发自动外边距计算；text-align: center失效常因父容器无宽、被浮动/定位覆盖或错误写在自身上；需双向居中时推荐父容器用display: flex; justify-content: center; align-items: center。
最稳、最通用的做法是给 <img> 加 display: block 和 margin: 0 auto；如果图在文本流里混排，优先用父容器 text-align: center。
为什么 margin: 0 auto 单独写在 <img> 上没反应
因为 <img> 默认是行内元素（display: inline），而 margin: auto 对行内元素水平方向无效。必须先显式声明 display: block 或 inline-block 才能触发自动外边距计算。
- 只写
margin: 0 auto→ 图片不动，控制台无报错，但样式不生效 - 漏掉
display: block是新手最常踩的坑 - 若图片需响应式（比如适配手机），记得加
max-width: 100%和height: auto防止拉伸变形
text-align: center 为什么有时也不起作用
这个属性只对父容器内的行内级子元素生效，所以它本身是对的，但容易被上下文破坏：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器宽度为
0或未设宽（比如div没内容且没width/min-width）→ 实际无“可居中空间” - 父容器用了
float、position: absolute或display: flex/grid→text-align可能被忽略或覆盖 - 错误地写在
<img>标签上（如<img style="max-width:90%">）→ 完全无效，该属性不作用于自身
什么时候该用 flex 而不是 margin 或 text-align
当你需要同时控制水平和垂直居中，或者图片要和文字、按钮等其他元素对齐时，flex 是更可靠的选择，但它必须作用在父容器上：
- 别给
<img>自己加display: flex—— 它不是容器，加了没意义 - 父容器要设
display: flex; justify-content: center; align-items: center - 若父容器高度不确定（比如内容动态加载），
align-items: center可能不生效，建议加min-height或固定高 - 旧 Android 浏览器（4.4 及以下）需补
-webkit-justify-content等前缀
绝对定位居中只适合特定场景，别滥用
用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 确实能强行锚点居中，但代价明显：
- 图片脱离文档流 → 后面的元素会“看不见”它，直接往上顶，布局容易错乱
- 必须确保父容器有
position: relative，否则定位基准是视口 - 响应式下难维护：宽高变化时，
transform仍有效，但若父容器尺寸塌陷，居中就失效 - 仅推荐用于模态框 logo、加载图标、动画层等明确脱离主内容流的场合
真正复杂的地方不在写法本身，而在判断上下文：父容器是否参与文档流？图片是否独立成块？要不要兼容老浏览器？这些条件一叠加，display: block; margin: 0 auto 就成了最不容易翻车的默认选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
