[分享]css内层div背景图片居中

今天我们来探讨一下如何在 CSS 中使内层 div 背景图片居中。首先，我们需要在 HTML 中添加两个 div。其中一个为外层 div，另一个为内层 div。例如： 接下来，在 CSS 中，我们...

今天我们来探讨一下如何在 CSS 中使内层 div 背景图片居中。
首先，我们需要在 HTML 中添加两个 div。其中一个为外层 div，另一个为内层 div。例如：

<div class="outer">
  <div class="inner"></div>
</div> 

接下来，在 CSS 中，我们需要对外层 div 进行以下设置：

.outer {
  position: relative;
} 

在这里，我们将定位方式设置为“相对”，以便我们接下来使用绝对定位。
接下来，我们对内层 div 进行以下设置：

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置背景图片 */
  background-image: url(image.jpg);
  /* 设置背景图片大小 */
  background-size: contain;
  /* 设置背景图片重复方式 */
  background-repeat: no-repeat;
} 

在这里，我们将定位方式设置为“绝对”，并使用 top 和 left 将其移动到外层 div 中心点。接下来，我们使用 transform 对其进行微调，使其水平和垂直居中。最后，我们使用 background-image、background-size 和 background-repeat 属性来设置背景图片的样式。
最后，我们在 HTML 中添加一些文本，测试一下我们的代码是否正确。例如：

<div class="outer">
  <div class="inner"></div>
  <p>这里是一些文本内容。</p>
</div> 

现在，我们就成功实现了内层 div 背景图片的居中效果。希望本文能够对大家有所帮助！