background-position: center 未居中是因为它仅将背景图中心点对齐容器中心，而视觉居中还需配合 background-size: cover/contain、background-repeat: no-repeat 及容器有效尺寸；cover 裁剪边缘以填满，contain 留白以完整显示。
background-position: center 为什么没居中？
因为 background-position: center 只把背景图的“中心点”对齐到容器中心，但最终是否视觉居中，取决于图片尺寸和 background-size 的配合。默认 background-size: auto，大图原样渲染，只显示左上角一块，center 锚点没用——它只是把图的中心钉在容器中心，而不是把可见部分居中。
必须显式配对使用：
-
background-position: center center（写全更稳妥，避免旧 Android WebView 解析偏差） -
background-repeat: no-repeat（否则重复平铺会掩盖居中效果） -
background-size: cover或contain（否则不缩放，锚点无意义）
cover 和 contain 居中行为有什么区别？
background-size: cover 等比缩放至完全覆盖容器，可能裁剪边缘；background-position: center 确保被保留的中心区域居中——适合 Banner、头图等强调主体的场景。
background-size: contain 等比缩放至整张图完全可见，四周留白；background-position: center 让图本身在空白中居中——适合 Logo、图标等需完整展示的场景。
立即学习“前端免费学习笔记（深入）”；
别用 background-size: 100% 100%：强制拉伸失真，且此时 background-position 完全无效。
一行写全 background 属性防踩坑
用简写 background 一次性声明所有关键项，避免被后续样式覆盖或隐式重置：
.hero {
background: url('bg.jpg') center center / cover no-repeat;
}
注意顺序：url() → position → / size → repeat。漏掉 no-repeat 会回退到默认 repeat，图就铺满整个容器；漏掉 / cover 就是 auto，大图照样溢出。
如果用了 background: url() no-repeat; 这种写法，background-position 会被重置为 0% 0%，必须显式带上 center center。
Flex/Grid 容器里 background-position 失效？
不是失效，是误解了作用对象：background-position 定位的是背景图相对于**当前元素自身盒模型**的位置，跟父容器用 Flex 还是 Grid 无关。
真正导致“不居中”的常见原因：
- 父容器高度塌陷（比如没设
height或min-height），背景图无处可居中 - 用了
background-attachment: fixed，此时center相对于视口，不是容器 - CSS 优先级冲突，后加载的规则覆盖了
background-position，用开发者工具看 “Computed” 面板确认最终值
响应式容器宽高不固定时，background-position: center 依然可靠——它始终按当前容器尺寸实时计算，不是按原始图尺寸。
