css中div背景图居中

发表于前端技术学习版块 css,教程

在CSS中，我们可以使用background属性来设置一个元素的背景图。当我们想要将背景图居中时，一种常用的方法是使用背景位置属性background-position。示例代码： div { bac

在CSS中，我们可以使用background属性来设置一个元素的背景图。当我们想要将背景图居中时，一种常用的方法是使用背景位置属性background-position。

示例代码：
div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

在上述代码中，我们首先设置了背景图，然后设置了不允许图像重复，接着使用了background-position属性将图像的位置居中。该属性接受两个值，分别表示图像在元素中的水平和垂直方向的位置。这里我们使用了“center”表示居中。这样设置后，背景图就会在元素中水平和垂直方向上都居中显示。

除了使用background-position属性，还有一种另类的方法可以实现背景图居中，那就是使用伪元素。

示例代码：
div {
  position: relative;
}
div:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

在上述代码中，我们首先使用position属性将元素设置成相对定位。然后使用:before伪元素创建一个子元素。设置display为block，使其成为块级元素。position设置为absolute，使其脱离文档流。接下来使用top和left属性将其放置在元素的中心位置。最后使用transform的translate()方法调整图片的位置。此时，背景图就会在元素的中心位置上居中显示。

综上所述，使用background-position和伪元素两种方法都能轻松实现背景图在元素中居中显示。当然，具体采用哪种方法，还需根据实际情况来定。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。