css中如何实现图片垂直居中

CSS中如何实现图片垂直居中呢？

img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -50%;
  /* 图片高度的一半 */
} 

首先，我们先把图片设置为inline-block元素，这样才能够垂直居中。

接着，使用vertical-align属性，将图片与文本垂直居中对齐。

但是，仅仅使用这两个属性还不够，因为图片的高度可能会大于文本行高，因此我们需要再用一个margin-top属性，将图片向上移动它自身高度的一半。

这样，图片就能够完美地垂直居中了。