background-position: center 有时不生效是因为它仅将背景图中心点对齐容器中心，但视觉居中还需容器有明确宽高、background-size配合（如cover/contain）及background-repeat: no-repeat。
background-position: center 为什么有时不生效
直接写 background-position: center 多数情况下能居中，但前提是元素有明确宽高，且背景图尺寸小于容器。如果容器没设 width 或 height（比如 div 默认是内容撑开），或者背景图本身很大又没配 background-size，视觉上就容易“偏移”。
- 确保容器有固定尺寸，例如
width: 300px; height: 200px; - 搭配
background-size: cover或contain才能控制缩放行为；只用center不缩放时，大图仍会裁剪或溢出 - 避免同时设置
background-position: 50% 50%和center——两者等价，重复写不会增强效果，反而可能被后续规则覆盖
background-image 居中但不想拉伸图片
用 background-size: auto 保留原始比例，再靠 background-position: center 对齐中心点，但此时若容器和图片宽高比不一致，四周就会留白。这是正常表现，不是 bug。
- 检查是否误用了
background-size: cover（强制填满+裁剪）或contain（完整显示+可能留白） - 想让图片完整居中且不裁剪，必须用
background-size: contain; background-position: center; - 如果容器是响应式（如
width: 100%），建议加background-repeat: no-repeat，否则小图可能平铺干扰居中效果
Flex 容器里 img 标签居中 vs background-image 居中
这是两类方案：一个是把图片当 HTML 元素（<img>），一个是当 CSS 背景（background-image）。前者用 Flex 布局更直观，后者依赖背景定位规则。
-
<img>居中：父容器设display: flex; justify-content: center; align-items: center;，简单可靠 -
background-image居中：必须用background-position: center+ 合理的background-size，且无法像<img>那样设置alt或响应式srcset - 语义化优先选
<img>；纯装饰性图（如 banner 底纹）才用background-image
移动端适配时 background-position 偏移
常见于 iOS Safari 中，当页面开启缩放或 viewport 设置不当（比如 user-scalable=no 被禁用后手动缩放），background-position: center 计算基准可能受视口缩放影响，导致视觉偏移。
立即学习“前端免费学习笔记（深入）”；
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被覆盖 - 避免对背景容器使用
transform: scale()，它会干扰背景定位的渲染坐标系 - 真机调试时注意：iOS 滚动时某些背景图会短暂“抖动”，加
backface-visibility: hidden可缓解
center 就只是写了，没起作用。 
