最稳通用解法是给img设display: block和margin: 0 auto；混排文本流时用父容器text-align: center；需双向居中则用父容器display: flex; justify-content: center; align-items: center。
直接给 img 加 margin: 0 auto 不生效，是因为它默认是行内元素；真正起效的水平居中，得看图片在什么上下文中——是单独一张图？和文字混排？还是需要同时垂直居中？不同场景对应不同解法，选错就白写。
text-align: center 只对父容器生效，且只管行内内容
这是最轻量、兼容性最好的方案，但必须写在包裹 img 的父元素上，比如 <div> 或 <p>。它不操作图片本身，而是把图片当文字来排版。
- 正确写法：
<div style="text-align: center;"><img src="a.jpg"></div> - 错误写法：给
<img>自己加style="text-align: center"—— 完全无效 - 如果父容器用了
display: flex或display: grid，text-align会被忽略 - 图片若被设成
display: block或加了float，也会立刻失效
margin: 0 auto 要求图片变块级 + 有明确宽度
想让图片“作为独立块”居中，就得显式告诉浏览器：“我是个块，左右留空请平分”。但漏掉任一条件都会失败。
- 必须加
display: block，否则margin: 0 auto对行内元素无意义 - 必须设宽度，如
width: 300px或max-width: 100%+width: 100%，否则auto没参照 - 父容器不能是
display: flex或display: grid，否则会覆盖该行为 - 常见翻车：
<img src="x.png" style="margin: 0 auto;">—— 缺少display: block和宽度，必然不动
flex 布局实现水平居中（现代项目首选）
不用操心图片类型或宽高，只要父容器设对，子元素天然水平居中。但别把它当成“万能膏药”往任何地方贴。
立即学习“前端免费学习笔记（深入）”；
- 必须作用在父容器上：
style="display: flex; justify-content: center;" -
justify-content: center管水平，align-items: center才管垂直——要双向居中必须两个都写 - 父容器若高度塌缩（比如没设
height或min-height），align-items就看不出效果 - 别在已用
float或position: absolute的父容器上硬套 flex，布局逻辑会冲突
绝对定位 + transform 适合脱离文档流的场景
当图片要盖在其他内容上（比如加载图标、模态框里的图），又不想影响页面流时，这个组合最可靠。
- 父容器必须设
position: relative，否则top/left会相对于 viewport 定位 - 只写
left: 50%; top: 50%是把左上角移到中心，得补transform: translate(-50%, -50%)才真正居中 - transform 的百分比基于元素自身尺寸，所以无需预先知道宽高，响应式友好
- 如果图片本身是响应式（
max-width: 100%），这个方案依然稳
真正容易被忽略的是：图片太大时，光居中没用——必须配 max-width: 100% 和 height: auto，否则小屏上会撑破容器，甚至导致横向滚动条出现。
