用 background-image + cover + center 比 img + object-fit 更易控形变与居中；关键在于视觉中心对齐容器中心，且容器需有明确高度（如 min-height: 100vh），background-repeat: no-repeat 不可遗漏。
图片设为背景时用 background-size: cover + background-position: center
直接把图片当容器背景，比用 <img> 标签更易控形变和居中。关键不是“让图片居中”，而是让背景图的**视觉中心对齐容器中心**，同时保持比例。
-
background-position: center等价于50% 50%，确保图中心锚定容器中心 -
background-size: cover缩放图片使其完全覆盖容器，裁剪多余部分——这是防拉伸的核心，contain会留白，100% 100%必然变形 - 容器必须有可测量高度：空 div 会塌陷，至少加
min-height: 200px或height: 300px；全屏场景推荐min-height: 100vh（比height: 100vh更安全） - 别漏
background-repeat: no-repeat，否则平铺会覆盖居中效果
<img> 元素本身不失真，靠 object-fit: cover 和显式尺寸
如果必须用 <img> 标签（比如需要 alt 文本、SEO 或懒加载），就不能只靠 width/height 硬设——那会拉伸。得用 CSS 控制渲染方式。
- 给
<img>加object-fit: cover：它让图片按比例缩放并裁剪，填满容器，类似background-size: cover - 必须配合明确的容器宽高，或
width/height设置在<img>上；否则object-fit没参照系 - 常见错误：只写
width: 100%; height: 200px;→ 图片可能被压扁；正确写法是width: 100%; height: 200px; object-fit: cover; - 兼容性注意：
object-fit在 IE 完全不支持，如需兼容旧环境，只能退回background-image方案
居中要分清“水平”还是“水平+垂直”，别混用方案
失真控制和居中是两件事，但常被一起搞砸。比如用 text-align: center 能水平居中 <img>，但它对垂直方向完全无效，且不干预图片形变。
- 只要水平居中：
div上设text-align: center（<img>是 inline，默认生效） - 要水平+垂直居中：
display: flex父容器必须带justify-content: center+align-items: center，且容器有明确高度（min-height或height） - 绝对定位方案（
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）适合脱离文档流的场景，但需父容器position: relative，否则参考系错乱 - 别在一个方案里塞多个逻辑：比如给 flex 容器里的
<img>再加margin: 0 auto—— flex 已接管外边距，该声明会被忽略
响应式下微调居中焦点，用 background-position 百分比
用 cover 裁剪时，原图重点（比如人脸）可能被切掉。这时不能改图片，得调锚点。
立即学习“前端免费学习笔记（深入）”；
-
background-position: 50% 30%把垂直锚点上移，让人脸更靠近顶部显示 - 小屏适配常用：
@media (max-width: 768px) { .hero { background-position: 50% 40%; } } - 注意：这个值是相对于图片自身的，不是容器；
50% 50%是默认居中，调高第二个值会让图片“往下拉”，露出更多顶部内容 - 如果用的是
<img>+object-fit，就无法做这种微调——这是背景方案的不可替代优势
