如何垂直居中`<img>`？

有多种方法可以垂直居中 <img> 元素，选择哪种方法取决于 <img> 元素的上下文以及你想要达到的具体效果。以下是一些常用的技巧：

1. Flexbox: 这是现代布局中最推荐的方法，因为它简洁且灵活。

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

• display: flex; 将父元素设置为 flex 容器。
• align-items: center; 垂直居中对齐 flex 项（这里是图片）。
• justify-content: center; 水平居中对齐 flex 项。

2. Grid 布局: 同样非常强大且灵活，尤其适用于更复杂的布局。

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

• display: grid; 将父元素设置为 grid 容器。
• place-items: center; 是 align-items: center; 和 justify-items: center; 的简写，同时进行水平和垂直居中对齐。

3. 使用表格单元格: 将图像放置在表格单元格中，并设置垂直对齐方式。

<table>
  <tr>
    <td style="vertical-align: middle;">
      <img src="image.jpg" alt="Image">
    </td>
  </tr>
</table>

• vertical-align: middle; 将单元格内容垂直居中。

4. 绝对定位和 transform: 如果图片的尺寸是固定的，可以使用绝对定位和 transform 属性。

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

• position: relative; 将父元素设置为相对定位，作为绝对定位子元素的参照物。
• position: absolute; top: 50%; left: 50%; 将图片定位到父元素的中心。
• transform: translate(-50%, -50%); 将图片向上和向左偏移自身宽度和高度的一半，实现真正的居中。

5. line-height: 如果图片是 inline 元素或 inline-block 元素，并且父元素只有一行文本，可以设置 line-height 等于父元素的高度。

<div style="line-height: 200px;">  <!-- 假设父元素高度为 200px -->
  <img src="image.jpg" alt="Image" style="vertical-align: middle;">
</div>

• vertical-align: middle; 与 line-height 配合使用，将图片垂直居中对齐到行高。

选择哪种方法？

• 对于简单的布局，Flexbox 或 Grid 是首选，因为它们更简洁易用。
• 对于复杂的布局，Grid 通常更合适。
• 如果你需要兼容非常老的浏览器，表格单元格方法可能更可靠，但代码会比较冗长。
• 绝对定位和 transform 方法适用于尺寸固定的图片。
• line-height 方法只适用于单行文本的场景。

记住根据你的具体情况选择最合适的方法。 建议优先使用 Flexbox 或 Grid。