有多种方法可以垂直居中 <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。
