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

让 div 中的图片和文字同时垂直居中有很多方法，以下是几种常见且有效的方法：

1. Flexbox 布局 (推荐): Flexbox 是最简单且最灵活的解决方案。

<div style="display: flex; align-items: center; justify-content: center;">
  <img src="image.jpg" alt="Image">
  <span>文字内容</span>
</div>

display: flex; 启用 Flexbox 布局。
align-items: center; 垂直居中。
justify-content: center; 水平居中。

2. Grid 布局: Grid 布局也能轻松实现，尤其在更复杂的布局中更有优势。

<div style="display: grid; place-items: center;">
  <img src="image.jpg" alt="Image">
  <span>文字内容</span>
</div>

display: grid; 启用 Grid 布局。
place-items: center; 是 align-items: center; 和 justify-items: center; 的简写，同时实现水平和垂直居中。

3. 绝对定位 + transform: 这种方法需要设置父元素的 position: relative;。

<div style="position: relative;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <img src="image.jpg" alt="Image">
    <span>文字内容</span>
  </div>
</div>

父元素 position: relative; 作为子元素绝对定位的参照物。
子元素 position: absolute; top: 50%; left: 50%; 将子元素的左上角定位到父元素的中心。
transform: translate(-50%, -50%); 将子元素自身的中心点移动到父元素的中心点，实现居中。

4. 表格布局 (不推荐): 虽然可以实现，但不推荐使用，因为它语义化不佳，且不够灵活。

<div style="display: table; width: 100%; height: 100%;">
  <div style="display: table-cell; vertical-align: middle; text-align: center;">
    <img src="image.jpg" alt="Image">
    <span>文字内容</span>
  </div>
</div>

5. line-height (仅限单行文本): 如果只有单行文本且图片高度固定，可以设置 line-height 等于父元素高度实现垂直居中。

<div style="height: 100px; line-height: 100px;">
  <img src="image.jpg" alt="Image" style="vertical-align: middle;">
  <span>文字内容</span>
</div>

vertical-align: middle; 用于图片的垂直居中。

选择哪种方法？

Flexbox 和 Grid 布局是现代 CSS 的推荐方案，它们更灵活、更易于维护。 Flexbox 更适合一维布局（例如一行或一列），Grid 更适合二维布局。如果只是简单的图片和文字居中，Flexbox 通常是最佳选择。避免使用表格布局，除非有特殊的兼容性需求。绝对定位 + transform 方法在某些情况下也很有用，但不如 Flexbox 和 Grid 简洁。

额外提示: