HTML中如何实现图片的垂直居中

在 HTML 中，可以使用不同的方法来实现图片的垂直居中。以下是几种常用的方法：

方法一：使用 Flex 布局

<div style="display: flex; align-items: center; justify-content: center; height: 300px;">
  <img src="example.jpg">
</div>

在这个示例中，将图片包含在一个 div 容器中，并通过设置它的 display 为 flex，align-items 和 justify-content 分别设置为 center，使图片在垂直和水平方向上都居中。

方法二：使用绝对定位和负边距

<div style="position: relative; height: 300px;">
  <img src="example.jpg" style="position: absolute; top: 50%; transform: translateY(-50%);">
</div>

在这个示例中，将图片包含在一个相对定位的 div 容器中，然后将图片定位为绝对定位，并使用 top: 50% 和 transform: translateY(-50%) 将图片在垂直方向上居中。

方法三：使用表格布局

<table style="height: 300px; width: 100%;">
  <tr>
    <td style="vertical-align: middle; text-align: center;">
      <img src="example.jpg">
    </td>
  </tr>
</table>

在这个示例中，使用表格布局来实现图片的垂直居中。设置表格的高度为容器高度，然后使用 vertical-align: middle 和 text-align: center 将图片在垂直和水平方向上都居中。

以上是几种常见的实现图片垂直居中的方法，可以根据具体的需求选择适合的方法。