图片居中首选 object-fit + flex，container 需设宽高；IE 兼容用 background-image 替代 img；DOM 锁死时用 absolute + transform；vertical-align 不适用于父容器垂直居中。
图片尺寸未知时，用 object-fit 最省事
直接给容器加 display: flex + align-items: center + justify-content: center，再给 <img> 加 object-fit: contain（保持比例）或 object-fit: cover（填满裁切），就能稳稳居中。关键不是“怎么撑开容器”，而是让图片自己守规矩。
常见错误是死磕 width/height 百分比，结果图片被拉伸或溢出；或者只用 text-align: center，对块级 <img> 没用。
-
object-fit: contain适合需要完整显示图片的场景（比如头像预览、商品图） -
object-fit: cover适合强调构图、允许裁切的场景（比如 banner 背景） - 必须设
width和height给容器（哪怕只是200px或100%），否则 flex 居中无锚点 - IE 不支持
object-fit，如果要兼容，得换方案
IE 兼容方案：用 background-image 替代 <img>
当必须支持 IE11 或更老版本时，<img> 标签的居中控制太不可靠，不如把图片转成容器的背景——CSS 的 background-position 和 background-size 在所有浏览器里行为一致得多。
注意这不是“偷懒”，而是绕过 IE 对替换元素（如 <img>）的盒模型处理缺陷。
立即学习“前端免费学习笔记（深入）”；
- 把
<img src="xxx">改成<div style="background-image: url(xxx)"></div> - 用
background-size: contain或background-size: cover - 用
background-position: center确保对齐原点 - 记得显式设置容器的
width和height，否则背景不显示
不想改 HTML 结构？用 position: absolute 手动居中
如果 DOM 结构锁死、不能加 wrapper、也不能改标签类型，就用绝对定位硬算——虽然糙，但有效，且兼容性拉满。
核心思路：把图片设为绝对定位，用 top: 50% + left: 50% 移到容器中心点，再用 transform: translate(-50%, -50%) 回拉自身宽高的一半。
- 容器必须是
position: relative（否则absolute会相对于视口定位） -
transform是关键，只写top/left: 50%会让图片左上角在中心，不是整体居中 - 图片不用设宽高，浏览器自动按原始尺寸渲染，
transform也不影响布局流 - 慎用于频繁重排的场景（比如滚动中不断居中），
transform性能好，但定位本身触发 layout
为什么不用 vertical-align？
因为 vertical-align 只对 inline-level 元素（包括 <img>）生效，但它对齐的是**行框（line box）的基线**，不是父容器的垂直中心。即使配合 line-height，也极易受字体、空白符、兄弟元素影响，结果飘忽不定。
典型翻车现场：<div><img></div> 里只给 <img> 加 vertical-align: middle，图片看起来偏下——那是因为它在对齐文本基线，不是容器中线。
- 除非你明确在操作一行内联内容（比如图标+文字），否则别碰
vertical-align - 它和
margin: auto在块级元素上无效是同一类误解源头 - 现代布局中，flex / grid / transform 已覆盖全部合理需求，
vertical-align基本可视为遗留陷阱
真正难的不是“怎么写”，而是判断该用哪条路：要不要兼容 IE？DOM 能不能动？图片是否可能动态替换？这几个条件一组合，方案就锁死了。没想清楚就写代码，八成要返工。
