html图片上下居中

要让HTML中的图片上下居中，可以使用以下两种方法：

1.使用表格实现图片上下居中

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

2.使用CSS绝对定位和margin实现图片上下居中

<div id="wrap">
  <img src="your_image.jpg" alt="your_image" class="inner1">
</div>

<style>
  #wrap {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    background-color: red;
  }
  #wrap .inner1 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
</style>

其中，第一种方法使用了表格的垂直居中特性，将图片放在表格单元格中，并将单元格的垂直对齐方式设置为居中即可。

第二种方法使用了CSS的绝对定位和margin负值的特性，将图片的位置设置为绝对定位，并将左、上边距设置为50%，再通过margin负值将图片拉回自身宽度和高度的一半，从而实现图片的上下居中。