css怎么将背景图居中

段落一

居中背景图，不外乎两种情况，一种是背景图被平铺，一种是背景图完整展示且居中。本段落我们来看第一种情况。

background-image: url('img/your-image.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /*或 contain 适当选择*/

以上代码中，我们排除了背景图重复平铺的情况，然后用background-position居中展示图像，并用background-size规定背景图的大小。由于背景图被设置在容器的背景属性中，因此要居中展示，容器要有一定的宽高，否则居中效果不明显。

段落二

针对第二种情况，我们定义一个容器wrap，并保证容器具有一定的宽高。本段落我们来看CSS代码如下。

.wrap {
    position: relative;
    width: 500px;
    height: 500px;
}

.wrap::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('img/your-image.png') center center/cover no-repeat;
}

以上代码中，我们首先设定.wrap的宽高，并将其声明为相对定位。接着，用伪元素::after设置背景图作为.wrap的背景，并将它的宽高设置为100%，扩张至整个.wrap容器，z-index设为-1是为了确保其不会遮挡.wrap容器的其他元素。

段落三

以上两种方案都解决了背景图的居中问题，但仍然有一个问题需要考虑：图片加载慢或没有图像时背景图会展示出默认效果。因此，我来介绍一下懒加载方案。

以上代码中，定义了一个img标签来占位，data-src属性用来存放真正的图像。同时用JS实现了懒加载，对于页面上所有data-src属性的图片，根据其在视窗的位置判断是否该显示真正的图像，当Item元素位置进入视窗区域后，立即将data-src设置为真实图片地址。

段落四

最后，总结一下以上所有方案，对于不同需求的居中背景图我们可以采用不同的措施。对于背景图平铺，直接设置background-position：center center 居中即可；对于背景图完整展示，可以采用伪元素或absolute定位应用背景图，并设置背景图作为伪元素或绝对定位元素自适应容器大小；对于背景图的懒加载，则需要JS实现图片的懒加载。