background-position: center 不居中的根本原因是容器无明确高度或 background-size 改变定位基准；需配合 min-height: 100vh、background-repeat: no-repeat 及 cover/contain 才能实现视觉居中。
background-position: center 为什么经常不居中
根本原因是容器没高度，或者 background-size 拉伸后改变了定位基准。浏览器看到 background-position: center，是按“背景图原始尺寸”算的中心点，不是你眼睛看到的视觉中心。
常见错误现象：body 或 div 里只放了文字、没设高度，背景图被 background-size: cover 拉满后上下裁切，center 就只在原始坐标系里居中，实际视觉偏上或偏下。
- 确保容器有明确高度：加
min-height: 100vh（推荐），或显式height: 100%并保证父级也有高度 - 必须配合
background-repeat: no-repeat，否则重复平铺会掩盖居中效果 -
background-size: cover是最常用搭配，但要注意它会裁剪；如果不想裁剪，改用contain，再手动微调background-position - 调试时优先用
50% 50%替代center，方便后续偏移，比如右移 10px 改成60% 50%
fixed 背景下滚动时背景偏移怎么办
设置 background-attachment: fixed 后，背景图锚定视口，但某些浏览器（尤其是 Safari）对 background-position: center 解析不一致，滚动时会出现“抖动”或错位。
这不是 bug，是 fixed 背景的定位坐标系和普通文档流分离导致的——center 默认基于容器盒模型计算，而 fixed 背景实际以视口为参考。
立即学习“前端免费学习笔记（深入）”；
- 强制写全：
background-position: center center，两个方向都声明 - 加上
background-origin: border-box，锁定定位原点为容器边框内侧 - 避免直接在
html或body上设fixed，改用独立div包裹背景层，并设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
想让内容（比如登录表单）也居中，不能靠 text-align
text-align: center 只对行内元素和 inline-block 有效，对块级表单容器无效；background-image 本身是绘制层，Flexbox 的 justify-content 和 align-items 对它不起作用。
正确做法是把背景和内容分层：背景用一个 div 占满全屏，内容用另一个 div 绝对定位或 Flex 布局居中。
- 背景层：设
position: fixed或absolute，宽高 100%，z-index: -1 - 内容层：父容器设
display: flex; justify-content: center; align-items: center; min-height: 100vh; - 如果内容要响应式居中（比如小屏时垂直居中但不撑满），用
margin: auto+max-width+ 显式height更可控
移动端适配时 background-size: cover 容易裁掉关键主体
大背景图在手机竖屏下常被 cover 裁掉人脸或核心构图区域，单纯靠 center 不够。
关键不是“怎么居中”，而是“居中哪个部分”。很多设计师给的图默认构图中心是人脸，但实际拍摄/设计时可能偏上（留标题空间）或偏下（留操作区）。
- 用
background-position: 50% 30%把视觉重心往上提，适配移动端常见构图 - 结合媒体查询，在小屏下切换
background-size: contain+background-position: top center，保主体不裁 - 如果图是 SVG 或可编辑资源，建议让设计师导出带“安全区域”标记的版本，CSS 里用
background-position对齐该区域
background-size 模式下，“居中”的物理意义完全不同。动手前先确认：你要居中的，到底是图像的几何中心，还是画面里的视觉焦点？ 
