css如何让图片上下居中

CSS如何让图片上下居中？这是一个常见的问题，特别是在网页设计中。下面介绍几种方法，希望能够帮助到大家。

/* 方法一：使用table+vertical-align */
<table>
  <tr>
    <td>
      <img src="example.jpg">
    </td>
  </tr>
</table>

table {
  height: 100%;
}
td {
  vertical-align: middle;
}

/* 方法二：使用display:flex */
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法三：使用position+transform */
.container {
  height: 100%;
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

以上三种方法均可实现图片上下居中，具体选择哪一种方法可以根据实际情况来选择。