text-align: center 仅对父容器为块级且图片为内联元素时有效；失效主因是父容器使用 flex/grid、图片被设为 block 或父容器无明确宽度。
直接用 text-align: center 最快，但得看父容器是否是块级元素、图片是否被设为 inline（默认就是）——这是最常失效的原因。
为什么 text-align: center 有时没反应？
因为 text-align 只对行内内容（包括 img 这种默认 display: inline 的元素）生效，前提是它的父元素是块级容器且有明确宽度（比如 div 或 body）。常见失效场景：
- 父元素用了
display: flex或display: grid，但没配对齐属性 - 图片被意外加了
display: block，又没设margin: 0 auto - 父容器是
position: absolute且没设width，导致“居中”失去参照 -
img外层套了a标签，而a默认也是inline，没问题；但如果加了display: block却忘了居中自己，就会出问题
用 margin: 0 auto 的前提是什么？
这个方法只对 display: block 元素有效，所以必须先让图片变成块级：
<img src="logo.png" style="display: block; margin: 0 auto;">
注意两点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不能只写
margin: auto—— 老版本 IE 不支持，margin: 0 auto兼容性更稳 - 如果图片是响应式（比如加了
max-width: 100%），它仍会居中，但宽度随容器变小，这点没问题 - 若父容器是
flex，这招会被忽略，因为flex的对齐由justify-content控制
现代写法：Flex 布局一行搞定
给图片的直接父容器加 display: flex 和 justify-content: center，最可靠：
<div style="display: flex; justify-content: center;"> <img src="logo.png"> </div>
优势明显：
- 不管图片是
inline还是block都能居中 - 支持多图并排时整体居中（比如 logo + slogan 并列）
- 加
align-items: center还能垂直居中（适合单图+文字混排） - 注意：不要在
img上再设vertical-align，容易和align-items冲突
真正容易被忽略的是：居中行为依赖于父容器的渲染上下文。同一个 img 标签，在 body 直接子元素里用 text-align 有效，在 header 里失效，大概率是因为 header 被 JS 动态加了 display: flex 或 CSS 框架重置了样式——查 computed styles 比猜更快。
