用 background-size: cover + background-position: center 实现背景图居中需满足三条件：容器有明确高度（如 min-height: 100dvh）、html/body 设 height: 100% 且无边距、页面包含 viewport meta 标签；否则真机易出现裁切或黑边。
直接用 background-size: cover + background-position: center 就能实现，但必须满足三个硬性条件，缺一不可——否则在 iPhone 或安卓真机上大概率只显示半张图、上下黑边、或裁掉人脸。
为什么写了 cover 却没居中？先检查容器有没有“高度”
移动端最常踩的坑是：CSS 写对了，但背景图只铺开一截。根本原因不是属性失效，而是容器本身没高度，cover 没地方可“盖”。
-
html和body必须同时设height: 100%、margin: 0、padding: 0，否则高度塌陷 - 容器要显式撑高，推荐用
min-height: 100dvh（iOS 16+ 支持），并 fallback 到min-height: 100vh - 漏掉
，Safari 会按桌面宽度渲染，cover的缩放基准全错
background-position: center 不是万能的，关键区域得手动调
center center 是以整张图的几何中心为锚点裁剪，但设计师给的图里人脸常在中下部、标题压在上1/3——这时默认居中反而切掉重点。
- 想保人脸，试试
background-position: center 70%（把图往下拉，让脸部更多进入可视区） - 想保顶部 Logo，用
background-position: center top或50% 10% - 绝对不要写像素值，比如
10px 20px，响应式下完全失效 - 不同设备屏幕比差异大（iPhone 14 Pro 是 19.5:9，安卓常是 20:9），可用媒体查询微调：
@media (max-width: 480px) { .hero { background-position: center 60%; } }
object-fit: cover 是 img 元素的等效方案，语义更强但要求更严
如果背景图其实是内容（比如用户头像、产品主图），优先用 object-fit，而不是 background-image——它支持 alt、SEO、打印样式和 JS 读取尺寸。
- 容器必须有明确宽高，例如
width: 100%; height: 300px;或aspect-ratio: 16/9; -
img元素设width: 100%; height: 100%; object-fit: cover; object-position: center; -
aspect-ratio在 Safari 15.4+ 才稳定，老版本需用padding-top百分比 hack - 别在
img上只写max-width: 100%而不设高度，object-fit会失效
真正难的不是写哪几行 CSS，而是理解 cover 从不“智能识别构图”，它只认宽高比差值；而 background-position 控制的也不是“内容可见”，只是“裁剪起始坐标”。所有“看起来没居中”的问题，90% 出在容器结构或 viewport 设置上，而不是 position 值没写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
