header背景图居中需设background-position:center和background-size:cover（或contain），并禁用background-repeat:no-repeat；若header元素本身需水平居中，则须设置固定宽度加margin:0 auto。
直接说结论：header 里放背景图想居中，核心就两条：设 background-position: center，再配 background-size: cover（或 contain）；如果想让整个 header 元素在页面中水平居中，得给它加固定宽度 + margin: auto。
header 背景图不居中？先看 background-position 和 background-size 是否配对
很多人写了 background-image 却还是左上角显示，是因为没显式声明定位和缩放。浏览器默认是 background-position: 0% 0%（左上角），background-size: auto（原尺寸）。
-
background-position: center等价于50% 50%，但语义更清晰，推荐优先用 -
background-size: cover会让图片等比缩放并填满容器，可能裁剪边缘——适合全屏 banner 类场景 -
background-size: contain保证整图可见，但会留白，适合 logo 或图标类背景 - 必须同时禁用重复：
background-repeat: no-repeat，否则center会被覆盖失效
错误示例：background: url('bg.jpg') center; —— 缺少 no-repeat 和 cover，小图会平铺，大图可能只显示左上部分。
header 元素本身不居中？检查 width 和 margin
header 是块级元素，默认占满父容器宽度，所以即使背景图居中了，整个 header 还是“贴左”的。要让它在页面中水平居中，得手动收窄并居中外边距。
立即学习“前端免费学习笔记（深入）”；
- 必须设置明确的
width（比如width: 800px或max-width: 960px） - 搭配
margin: 0 auto（上下 0，左右自动均分） - 如果父容器是
body，注意body默认有margin: 8px（各浏览器略有差异），建议重置：body { margin: 0; } - 别用
text-align: center试图居中header—— 它只影响行内内容，对块级元素无效
常见坑：只写 margin: auto 不写 width，结果 header 仍撑满，auto 没参照可算，等于没写。
响应式下背景图“跑偏”？高度没设准是主因
背景图看起来居中，一缩放窗口就偏移，大概率是 header 高度没撑开。背景图的 center 是相对于容器宽高计算的，如果容器高度为 0 或由内容撑开，垂直居中就会失效。
- 给
header加min-height: 200px或height: 100vh（全视口高）确保有明确高度基准 - 如果用
flex或grid布局内部内容，记得header自身也要有高度约束，否则background-position: center的“中心”会漂移 - 慎用
background-attachment: fixed—— 在移动端常导致滚动卡顿，且与cover组合时容易视觉错位
调试技巧：临时加 border: 1px solid red 到 header，看清容器真实尺寸和位置，再调背景图。
要不要用 Flex 布局替代背景图？看内容是否需叠加文字
如果 header 里还要放标题、按钮等文字内容，且要求文字始终压在背景图安全区（比如避开暗角、留出呼吸空间），纯 CSS 背景图 + background-position 很难精准控制图文相对关系。
- 此时更稳的做法：把图片当普通
<img>放进header，再用display: flex+justify-content: center居中图片，文字用绝对定位或 flex 子项叠加 - 优势是图文 DOM 分离，可单独控制 z-index、filter、transition
- 劣势是多一个 HTTP 请求（除非 base64 内联），且图片无法被
background-blend-mode影响 - 如果只是装饰性 banner，背景图方案更轻量、更语义化
真正复杂的地方不在怎么写那几行 CSS，而在于你得先想清楚：这个“居中”到底是图居中，还是图+文字整体居中，还是图在视口中居中——三者对应的实现路径完全不同，混用就会反复踩坑。
