background-position: center 单独写通常不生效，是因为容器无高度、图片被拉伸或重复铺开导致视觉错位；需配合 min-height: 100vh、background-size: cover、background-repeat: no-repeat 和明确的 background-position: center center 才能真正居中。
background-position: center 单独写通常不生效，不是代码写错了，而是容器没高度、图片被拉伸或重复铺开导致视觉错位。
为什么 background-position: center 看似不生效
它不是“失效”，而是定位基准出问题：浏览器按图片原始尺寸和容器盒模型算中心点，但若容器高度为 0（比如空 <div>）、或用了 background-size: cover 后图片裁剪了，center 还是算对了，只是你看到的不是预期位置。
- 常见错误现象：
body或div里只写了背景图和background-position: center，但图片偏上/偏左，甚至完全看不见 - 根本原因：容器没有可测量的高度——CSS 默认不会给空元素撑高
- 干扰项：
background-repeat: repeat（默认值）会让图片平铺，掩盖居中效果；background-attachment: fixed在 Safari 下可能滚动偏移
零基础必须写的四行 CSS
不用理解原理，复制粘贴就能让背景图真·居中（全屏、不变形、不重复）：
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}-
background-position: center center比单个center更明确，强制横纵都居中 -
background-size: cover让图片缩放填满整个视口，保持比例，裁剪多余部分 -
min-height: 100vh是关键：确保容器至少占满一屏高度，vh比height: 100vh更安全（内容超出时不会遮挡） - 图片路径用单引号或双引号包裹，相对路径就行（如
images/bg.jpg），不用加file://
用 <div> 包裹背景更可控
直接写在 body 上容易被其他样式干扰（比如重置 CSS 改了 margin/padding），推荐新建一个全屏 <div> 专管背景：
立即学习“前端免费学习笔记（深入）”；
<div class="hero-bg"></div>
<p><style>
.hero-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url('bg.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
</style>-
position: fixed让背景钉在视口，滚动时不跟着动 -
z-index: -1确保内容（文字、按钮等）显示在背景上方 - 不用给
body加margin: 0—— 有些浏览器默认有边距，会留白 - 如果页面有导航栏等固定元素，
.hero-bg的height可改成calc(100vh - 60px)避开遮挡
调试时优先检查这三件事
90% 的“居中失败”问题都卡在这三个地方：
- 打开浏览器开发者工具（F12），选中背景元素，看
Computed面板里height和min-height是否为0px—— 是的话，立刻加min-height: 100vh - 右键检查图片路径是否 404：Network 标签页里找
bg.jpg，状态码不是 200 就说明路径错了 - 删掉所有其他 background 相关属性，只留
background-image、background-position、background-size、background-repeat四项，再逐步加回，定位干扰项
真正麻烦的不是写哪几行 CSS，而是确认容器有没有“存在感”——它得有宽、有高、有边界，center 才有坐标可依。
