直接给div设置背景图片并居中需三行css：background-image指定路径，background-position: center实现水平垂直居中，background-repeat: no-repeat防止平铺；若需完整覆盖且不变形，添加background-size: cover，并确保div有明确宽高或min-height。
直接给 div 设置背景图片并居中，核心是三行 CSS：指定图片、禁止平铺、定位居中。
基础写法：background-position: center
这是最常用也最简洁的方式。只要确保 div 有明确宽高（或最小高度），就能让背景图水平垂直都居中：
- background-image：填入图片路径
-
background-position: center：等价于
50% 50%，让图片中心对齐容器中心 - background-repeat: no-repeat：防止图片重复出现，否则居中效果会被覆盖
示例代码：
.my-bg {<br> width: 400px;<br> height: 300px;<br> background-image: url('banner.jpg');<br> background-position: center;<br> background-repeat: no-repeat;<br>}让背景图完整覆盖且不变形：background-size: cover
如果希望图片撑满整个 div，同时保持比例、不拉伸，加上这一句即可：
- background-size: cover：缩放图片使其完全覆盖容器，超出部分被裁剪
- 搭配
background-position: center，能保证裁剪后视觉中心仍是原图重点区域
推荐组合写法：
.my-bg {<br> background-image: url('hero.jpg');<br> background-position: center;<br> background-size: cover;<br> background-repeat: no-repeat;<br> min-height: 100vh; /* 防止高度塌陷 */<br>}注意容器必须有“可测量的高度”
很多情况下 background-position: center 看似不生效，根本原因是 div 高度为 0 —— 比如里面没内容、也没设 height/min-height。
- 若 div 是空的，至少加
min-height: 200px或height: 300px - 全屏背景建议用
min-height: 100vh，比height: 100vh更安全（避免内容溢出时遮挡） - 不要依赖父容器自动撑高，尤其是 flex 或 grid 子项里，需显式定义
微调位置或适配不同屏幕：用百分比或媒体查询
默认 center 是 50% 50%，但你可以手动调整，比如突出人物脸部：
-
background-position: 50% 30%：垂直方向上移，让焦点更靠近顶部 - 响应式场景下，小屏时换角度：
@media (max-width: 768px) {
.my-bg { background-position: 50% 40%; }
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
