最稳的全屏背景图居中写法是background-position: center，等价于50% 50%，需配合no-repeat和cover或contain控制缩放，单个center即可自动补全垂直值，兼容ie8+且不易出错。
background-position 怎么写才能让图片居中
直接用 center 就行，不是数值也不是百分比——这是最常用也最不容易出错的写法。它等价于 50% 50%，但更直观、兼容性更好（IE8+ 都支持）。
如果用数值，比如 100px 200px，就容易偏移；用 left top 或 right bottom 则完全不居中。
常见错误是以为写成 center center 才对，其实单个 center 就够了，CSS 会自动补全第二个值为 center。
-
background-position: center;→ 水平垂直都居中 -
background-position: center top;→ 水平居中、顶部对齐 -
background-position: right center;→ 右对齐、垂直居中
为什么 background-image 居中了但还是看到白边或裁剪
居中只是定位，不控制缩放。如果图片尺寸和容器不匹配，就会露白或溢出。这时候得配合 background-size。
最常用的组合是：
background-position: center;-
background-size: cover;→ 等比缩放填满容器，可能裁剪边缘 -
background-size: contain;→ 等比缩放完整显示图片，可能留白
别漏掉 background-repeat: no-repeat;，否则小图会平铺，居中也就没意义了。
内联 style 和 CSS 文件里写法有区别吗
没有区别。HTML 内联写法：style="background-image: url(img/bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;"，和外部 CSS 里写效果一致。
但要注意路径问题：内联 style 中的 url() 是相对于当前 HTML 文件位置解析的；而 CSS 文件里的 url() 是相对于该 CSS 文件位置解析的。经常因此报 404。
另外，内联 style 不支持伪类（如 :hover 换背景），动态切换必须用 JS 或写在 CSS 里。
用 img 标签实现“背景图居中”可行吗
可以，但逻辑不同。img 不是背景，是内容元素，要用 object-fit 和容器约束来模拟。
典型做法：
- 给
<img>外层加一个固定宽高的容器，设overflow: hidden; - img 设置
width: 100%; height: 100%; object-fit: cover; - 再用
object-position: center;控制图像在容器内的对齐（类似background-position）
object-position 的取值和 background-position 完全一致，center、50% 50% 都能用。但注意 IE 不支持 object-fit/object-position，需要 fallback。
真正要当背景用（比如文字叠在上面），还是推荐 CSS 背景方案；如果需要响应式懒加载、SEO 友好或无障碍支持，<img> 更合适。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
