在index.html中怎么居中一个图片？

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;">

注意两点：

立即学习“前端免费学习笔记（深入）”；

• 不能只写 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 比猜更快。