background-position: center 不生效的根本原因是容器缺乏可测量尺寸或 background-attachment、background-size 等属性干扰定位；需确保容器有高度（如 min-height: 100vh）、配合 background-size: cover 和 background-repeat: no-repeat，并在 fixed 场景下显式写 center center 且设 background-origin: border-box。
background-position: center 为什么有时不生效
直接写 background-position: center 看似简单，但常被忽略的前提是：背景图必须有明确的渲染尺寸。如果父容器高度为 0（比如只有内联内容、未设 height 或 min-height），或背景图被 background-size: cover / contain 拉伸后超出容器边界，center 就只是“在原始坐标系里居中”，视觉上并不居中。
实操建议：
- 确保容器有可测量的高度，例如加
min-height: 100vh或显式height - 配合
background-size: cover使用，避免图片拉伸失真同时保持居中 - 禁用默认背景重复：
background-repeat: no-repeat
用 background-position 的具体值精准控制
background-position 支持关键字（如 center）、百分比（如 50% 50%）和长度单位（如 20px 30px）。其中 50% 50% 和 center center 等价，但前者更利于调试——比如想微调偏右 10px，改成 60% 50% 比用 center 后再加 background-origin 更直接。
常见组合示例：
立即学习“前端免费学习笔记（深入）”；
body {
background-image: url('bg.jpg');
background-position: 50% 50%; /* 水平垂直都居中 */
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}fixed 定位下背景图居中要防滚动偏移
当设置 background-attachment: fixed 时，背景图会相对于视口固定。此时若只用 center，在某些浏览器（尤其是 Safari）中可能出现滚动时背景“抖动”或偏移。根本原因是 fixed 背景的坐标系和文档流分离，而 background-position 默认基于容器盒模型计算。
解决办法：
- 改用
background-position: center center显式声明两个方向 - 加上
background-origin: border-box，强制以容器边框为定位基准 - 避免在
html或body上直接设fixed，优先用独立<div> 包裹背景<h3>Flexbox 不能直接居中 background-image，但能辅助容器居中</h3> <p><code>background-image是元素自身的绘制层，Flexbox 的justify-content/align-items只作用于子元素，对背景图无效。但你可以用 Flexbox 让一个空<div> 占满全屏并设背景，再通过 flex 居中其内部内容（比如文字、按钮），形成“背景居中 + 内容居中”的整体效果。<p>典型结构：</p><pre class="brush:php;toolbar:false;"><div class="bg-container"> <div class="content">Hello</div> </div></pre><pre class="brush:php;toolbar:false;">.bg-container { min-height: 100vh; background: url('bg.jpg') no-repeat center center / cover; display: flex; justify-content: center; align-items: center; } .content { /* 内容在此居中，不影响背景定位 */ }</pre><p>背景图居中的关键不在“怎么写 center”，而在确认容器尺寸、attachment 行为、以及是否混淆了“内容居中”和“背景绘制居中”这两个不同层级的控制。</p> </div>
