CSS 图片背景在 div 中水平居中

在一个 div 容器中，我们有时需要将背景设置为一张图片，并使其水平居中。这篇文章将介绍如何使用 CSS 实现这一效果。

HTML 代码

首先，我们需要一个包含图片的 div 容器。HTML 代码如下：

<div class="bg-image">
  <img src="path/to/image.jpg" alt="图片">
</div>

CSS 代码

接下来，我们使用 CSS 将背景设置为图片，并使其水平居中。

首先，我们将 div 容器设置为相对定位：

.bg-image {
  position: relative;
}

然后，我们将图片设置为绝对定位，并将其放置在 div 容器的中心：

.bg-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

最后，我们将图片作为 div 容器的背景，并将其覆盖在原来的图片上：

.bg-image {
  position: relative;
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}

.bg-image img {
  display: none;
}

完整的 CSS 代码如下：

.bg-image {
  position: relative;
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}

.bg-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

总结

通过以上的 CSS 代码，我们可以将背景设置为图片，并使其水平居中。这种方法同样适用于其他元素，例如文本或图标。

完整的 HTML 和 CSS 代码示例可以在以下链接中找到：

GitHub - CSS Image Background in Div Centered Horizontally