DIV或者DIV里面的图片水平与垂直居中的方法

让我详细讲解一下DIV或者DIV里面的图片水平与垂直居中的方法。在这里我会给出两种常用的实现方式。

方法一：使用CSS的position和transform属性

首先，HTML结构如下：

<div class="wrapper">
  <img src="path/to/image.jpg" alt="image" />
</div>

其中，.wrapper是外层容器，.img是要居中的图片。

接着，我们给.wrapper设置以下样式：

.wrapper {
  position: relative;
}

然后给.img设置如下样式：

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

这里要注意的是，使用top: 50%和left: 50%将图片的左上角对准了容器的中心点。然而，图片的中心并不在它的左上角，因此我们需要使用transform: translate(-50%, -50%)将图片向上、向左移动自身的一半大小，使其居中显示。

方法二：使用flex布局

另一种实现方式是使用flex布局。HTML结构如下：

<div class="wrapper">
  <img src="path/to/image.jpg" alt="image" />
</div>

然后给.wrapper设置如下样式：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

这里使用display: flex将容器设置为flex布局。然后使用justify-content: center和align-items: center来水平和垂直居中图片。

接下来，我将给出两条示例说明：

示例一：DIV水平居中

HTML结构如下：

<div class="wrapper">
  <div class="content">
    <h1>Hello, world!</h1>
  </div>
</div>

然后给.wrapper和.content设置如下样式：

.wrapper {
  display: flex;
  justify-content: center;
}

.content {
  width: 50%; /* 设置内容宽度 */
}

这里使用display: flex将.wrapper设置为flex布局，然后使用justify-content: center来水平居中。接着，给.content设置一个宽度，使其在.wrapper中居中显示。

示例二：DIV里面的图片水平垂直居中

HTML结构如下：

<div class="wrapper">
  <img src="path/to/image.jpg" alt="image" />
</div>

然后给.wrapper和.img设置如下样式：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 设置容器高度 */
}

.img {
  max-width: 100%; /* 确保图片宽度不会超过容器 */
  max-height: 100%; /* 确保图片高度不会超过容器 */
}

这里同样使用flex布局，但是我们添加了align-items: center来使图片垂直居中。此外，我们还设置了容器的高度和图片的最大宽度和最大高度，以确保图片不会超出容器。

以上是DIV或者DIV里面的图片水平与垂直居中的完整攻略，希望对您有所帮助。