图片水平居中首选text-align:center（作用于父容器）或margin:0 auto（需img设display:block且有明确宽度），禁用已废弃的align属性；失效主因是父容器无宽、img未转块级或布局上下文冲突。
用 text-align: center 让图片在块级容器中水平居中
这是最常用也最稳妥的方式，前提是图片本身是行内元素（<img> 默认就是），且父容器是块级元素（比如 <div>）。直接给父容器加样式即可，不用动 <img> 本身。
常见错误是只给 <img> 加 text-align: center —— 这没用，因为 text-align 是作用在**包含块**上的，不是作用在自身元素上。
示例：
<div style="text-align: center;"> <img src="photo.jpg" alt="示例图"> </div>
- 适用场景：单张图、图+文字混排、响应式页面中需要简单居中
- 注意：
<img>不能设为display: block，否则会脱离文本流，text-align失效 - 如果父容器用了
flex或grid，text-align会被忽略
用 margin: auto 配合 display: block
当图片需要独占一行、且你希望它严格按块级方式居中时，这个组合更可控。核心是把 <img> 变成块级元素，再靠左右自动外边距实现居中。
立即学习“前端免费学习笔记（深入）”；
常见错误是漏掉 display: block —— 没这句，margin: auto 对行内元素无效。
示例：
<img src="photo.jpg" alt="示例图" style="display: block; margin: 0 auto;">
- 适用场景：轮播图、banner 图、独立展示的插图
-
margin: 0 auto中的0是上下边距，可按需调整；auto仅作用于左右 - 不依赖父容器样式，但父容器必须有明确宽度（默认 100% 通常够用）
避免用 align="center" 这种过时写法
align 属性在 HTML5 中已废弃，浏览器虽大多仍兼容，但会在控制台报警告，且语义不清、不可维护。
错误写法：
<img src="photo.jpg" align="center">
- 现代项目里别用，尤其团队协作或需要通过 W3C 验证时
- 它实际行为不稳定：在某些旧版 IE 中可能触发怪异盒模型，或与 CSS 冲突
- 如果用的是 CMS 或静态生成器，这类属性容易被自动过滤或转义
居中失效？先检查这几个地方
很多“居中不了”问题其实和图片本身无关，而是布局上下文出了问题。
- 父容器是否设置了
width？如果父容器是inline或fit-content，text-align可能没空间可居中 -
<img>是否被其他 CSS 强制设了float或position: absolute？这两者会让margin: auto和text-align失效 - 是否启用了
box-sizing: border-box但忘了算边框/内边距？可能导致计算宽度溢出，视觉上偏移 - 用开发者工具选中图片，看 computed 样式里
display真实值是不是inline或block—— 有时候框架或重置 CSS 会悄悄改掉它
复杂点往往不在怎么写，而在没意识到居中是相对谁而言的；父容器的 display 类型、尺寸、定位方式，比一行居中代码更关键。
