在 HTML 中，我們經(jīng)常需要將圖片居中展示，如果圖片大小與父元素相同，則相對容易，只要使用text-align: center;即可。但是如果圖片大小與父元素不同，則需要使用其他方式來實(shí)現(xiàn)垂直居中。下面介紹幾種實(shí)現(xiàn)方式：

//第一種方式：使用table元素實(shí)現(xiàn)垂直居中
<table>
<tr>
<td style="vertical-align: middle;">
<img src="image.jpg" alt="image">
</td>
</tr>
</table>
//第二種方式：使用flex布局實(shí)現(xiàn)垂直居中
<div style="display: flex; justify-content: center; align-items: center;">
<img src="image.jpg" alt="image">
</div>
//第三種方式：使用absolute定位實(shí)現(xiàn)垂直居中
<div style="position: relative;">
<img style="position: absolute; top: 50%; transform: translateY(-50%);" src="image.jpg" alt="image">
</div>

上述三種方式都可以實(shí)現(xiàn)垂直居中，使用時(shí)根據(jù)實(shí)際情況選擇合適的方式。當(dāng)然也有其他方式實(shí)現(xiàn)垂直居中，可以根據(jù)具體情況自行探索。