图片水平居中需根据父容器布局选择方案：text-align: center 须设于父容器且父容器不能是 flex/grid；margin: 0 auto 要求图片为 block 并有明确宽度；flex 布局用 justify-content: center 更可控。
直接给图片加 text-align: center 没用——这个属性必须写在父容器上，不是 <img> 自己。
text-align: center 必须作用于父容器
这是最轻量、兼容性最好的方案，适用于图文混排、页头 logo、卡片配图等场景。它只对行内元素生效，而 <img> 默认就是 display: inline，所以只要父容器（比如 <div> 或 <header>）设了 text-align: center，图片自然水平居中。
- 常见错误：
<img style="text-align: center">→ 完全无效，text-align不是<img>的属性 - 父容器不能是
display: flex或display: grid，否则该属性被忽略 - 如果父容器里还有文字或其它
<img>，它们也会一起居中；若混有<div>这类块级子元素，它们不受影响、仍靠左 - 示例：
<div style="text-align: center"><img src="logo.png"></div>
margin: 0 auto 要求图片转为块级且宽度明确
这个方案适合图片独占一行、需要脱离文本流的场景，比如 banner 图或独立图标。但它不是“让图片居中”，而是让浏览器把左右 margin 平分剩余空间——所以前提条件缺一不可。
- 必须给
<img>加display: block（默认是 inline，margin: auto对它无效） - 图片必须有可计算的宽度：显式设
width: 200px，或依赖固有尺寸；width: 100%或max-width: 100%会让auto失效 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为 - 示例：
<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto;">
Flex 布局实现更可控的水平居中
当父容器已用 flex（比如导航栏、响应式卡片），或你需要同时控制多个子元素（如图片+文字并排居中）时，justify-content: center 是更可靠的选择。它不依赖元素类型，也不吃 text-align 那套规则。
立即学习“前端免费学习笔记（深入）”；
- 只需给父容器加
display: flex和justify-content: center，子元素无需额外样式 - 如果父容器本身是
<body>或全局 wrapper，慎用——它会让所有直系子元素变成 flex item，可能破坏原有结构 - 若父容器高度塌陷（比如没设
height或min-height），不影响水平居中，但后续加垂直居中会出问题 - 示例：
<div style="display: flex; justify-content: center"><img src="photo.jpg"></div>
真正容易被忽略的是上下文：你用的不是“一个方法”，而是“一个方法在某个父容器状态下的表现”。text-align 被覆盖、margin: 0 auto 因父容器 flex 而失效、flex 因高度缺失导致垂直方向失控——问题从来不在代码本身，而在它所处的布局环境里。
