background-position 默认值为 0% 0%（左上角），非居中；需显式设 center center 并搭配 background-repeat: no-repeat 才能正确居中，且在响应式、Flex/Grid 中均有效。
background-position 居中图片时，为什么图片总偏左上角？
因为 background-position 默认值是 0% 0%（即左上角），不是居中。哪怕你写了 background-size: contain 或 cover，只要没显式设居中值，图片就纹丝不动地贴在容器左上。
正确做法是配对使用：
-
background-position: center center（等价于center） - 必须搭配
background-repeat: no-repeat，否则重复平铺会掩盖居中效果 - 如果容器宽高不固定（比如响应式 flex 项），
center依然可靠——它始终相对于当前背景定位区计算，不是相对于原始图片尺寸
用 background-image 做响应式头图时，如何避免拉伸又保持居中？
直接用 <img> 标签加 object-fit 更直观，但若必须走 CSS 背景（比如需要伪元素叠加、渐变蒙层），就得靠 background-size + background-position 组合控制。
-
background-size: cover：填满容器，可能裁剪边缘，background-position: center确保主体（如人脸）大概率可见 -
background-size: contain：完整显示整张图，留白不可避免；此时background-position: center让图片在空白中居中，视觉更稳 - 别用
background-size: 100% 100%—— 强制拉伸，失真严重，且和background-position无关
background-position: center 在 Flex/Grid 容器里失效？
不是失效，是误解了作用对象：background-position 定位的是**背景图相对于它的承载元素（即设置该样式的 DOM 节点）的盒模型**，跟父容器布局方式无关。
立即学习“前端免费学习笔记（深入）”；
常见误判场景：
- 给一个
display: flex的<div>设了background-image和center，但内部有子元素撑开高度，导致背景只渲染在“内容高度”范围内，看起来像没居中——这时应加min-height: 100vh或height: 100%显式定义背景绘制区域 - 用 Grid 布局时，若背景设在 grid item 上，而 item 自身尺寸为
auto，背景绘制区可能极小；优先确保该元素有明确宽高（哪怕是min-width/min-height） - 移动端 Safari 对
background-position: center解析稳定，但老版本（iOS 12 之前）对background-size: cover+background-attachment: fixed有渲染 bug，纯居中无影响
为什么 background-position 写成 "50% 50%" 和 "center center" 效果一样？
本质相同：center 是 50% 的语法糖，background-position 的百分比值是按「容器尺寸减去背景图尺寸」后剩余空间的比例计算的，所以 50% 50% 天然对应水平垂直各居中一半空隙。
- 写
center center更易读，推荐日常使用 - 写
50% 50%在需要微调时更灵活（比如50% 60%下移一点） - 注意：不要混用单位，
center 20px合法，但50% 20px会导致整个声明被浏览器忽略（CSS 解析失败） - 所有现代浏览器都支持
center关键字，无需前缀
background-repeat: no-repeat，尤其当图片尺寸小于容器时——默认平铺会让居中完全不可见。 
