background-position: 50%等价于50% 50%，即背景图中心点对齐容器中心点；但实际视觉居中效果受图片尺寸、background-size及容器是否有有效宽高影响，缺一不可。
background-position: 50% 是什么效果
background-position: 50% 只写一个值时，它等价于 background-position: 50% 50%，即水平和垂直都居中。但很多人误以为它只控制水平方向——其实 CSS 规范明确：单值写法会自动补全第二个值为 50%。
不过这个“居中”不是绝对意义上的视觉居中，而是把背景图的 **50% × 50% 点**（即图像中心）对齐到容器的 **50% × 50% 点**（即容器中心）。最终是否看起来居中，取决于图片尺寸、background-size 和容器是否有可测量尺寸。
为什么写了 50% 却没居中
常见失效不是语法错，而是前提条件缺失：
- 容器高度为 0：比如
div里没内容、没设height或min-height，背景区域实际不存在 → 加min-height: 200px或height: 100vh验证 -
background-image路径错误或 404：图片根本没加载 → 打开开发者工具 Network 面板确认请求状态 - 被简写属性覆盖：
background: url(...) no-repeat;会重置background-position为0% 0%→ 改成background: url(...) 50% 50% / cover no-repeat; -
background-attachment: fixed下 Safari 行为异常：此时建议显式写background-position: 50% 50%，并加background-origin: border-box
50% 和 center 有什么区别
50% 50% 和 center center 在渲染结果上完全等价，但 50% 更利于后续微调：
- 想让图偏右一点？改成
60% 50%，比用center再配合background-origin更直接 - 想贴顶部居中？用
50% 0，而不是center top（后者在某些旧 Android WebView 中解析不稳定） - 调试时看 computed 值更直观：浏览器 DevTools 显示的是百分比数值，不是关键字
搭配 background-size 的关键影响
background-position: 50% 50% 的作用对象是缩放后的图像，不是原始图：
-
background-size: cover：图像等比放大填满容器，超出部分裁剪；50% 50%保证被保留的中心区域居中 -
background-size: contain：图像完整显示，留白在四周；50% 50%让图本身在空白中居中 -
background-size: 100% 100%：强制拉伸失真，50% 50%只是对齐拉伸后图像的中心点，不解决变形问题
真正容易被忽略的是：当容器宽高比和图片宽高比差异大时，cover + 50% 50% 虽能保证主体居中，但边缘裁剪不可控——如果设计要求露出特定区域（比如人脸），就得用具体像素偏移，比如 background-position: 40% 30%。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
