怎么让div中的图片和文字同时上下居中？

在前端开发中，有多种方法可以让一个 div 中的图片和文字同时上下居中。以下是一些常见的方法：

1. 使用 Flexbox

Flexbox 是一个非常强大的布局模型，可以很容易地实现元素的居中。

<div class="container">
  <img src="image.jpg" alt="Image">
  <span>文字</span>
</div>

.container {
  display: flex;
  flex-direction: column; /* 如果需要垂直排列图片和文字 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中，如果需要 */
  height: 200px; /* 示例高度 */
}

2. 使用 CSS Grid

CSS Grid 也是一个非常灵活的布局系统。

<div class="container">
  <img src="image.jpg" alt="Image">
  <span>文字</span>
</div>

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 200px; /* 示例高度 */
}

3. 使用定位和转换

这种方法使用绝对定位和转换来实现居中。

<div class="container">
  <img src="image.jpg" alt="Image" class="centered">
  <span class="centered">文字</span>
</div>

.container {
  position: relative;
  height: 200px; /* 示例高度 */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%; /* 如果也需要水平居中 */
  transform: translate(-50%, -50%); /* 水平和垂直居中 */
}

注意：在使用绝对定位时，需要确保父元素（在这个例子中是 .container）有一个定义好的高度。

4. 使用行高（适用于单行文本）

如果只有一行文本，可以通过设置行高来实现垂直居中。

<div class="container">
  <img src="image.jpg" alt="Image" style="vertical-align: middle;">
  <span>文字</span>
</div>

.container {
  line-height: 200px; /* 与容器高度相同 */
  height: 200px; /* 容器高度 */
}
.container span {
  display: inline-block;
  vertical-align: middle;
}

注意：这种方法主要适用于单行文本和较小的图片。对于更复杂的布局或多行文本，可能需要使用其他方法。

选择哪种方法取决于你的具体需求和布局上下文。Flexbox 和 CSS Grid 提供了更现代和灵活的解决方案，而定位和转换方法则提供了更多的控制选项。