有时候我们可能需要把图像截取成固定的高，但是一般的方法都只能得到图片的上半部分或者下半部分，而这并不是我们需要的，今天分享一种用CSS使图片垂直居中显示的方法。

计算偏移量

这非常的棘手，因为我们需要图片的高度和容器的高度计算出垂直偏移量。比如图片的高度是 600px ，而容器的高度为 100px ，那么垂直偏移量为 (600 - 100)/2 = 250px ，所以我们需要把图片在垂直方向向上提 250px 。使用JavaScript来计算所有图片的偏移量显然是不切实际且消耗资源的。

我们把上面的等式推导一下，可以得到 a * 0.5 - b * 0.5 ，其中 a 是容器的高度，b 是图片的高度。

相关属性

我们需要用到两个CSS属性top 和 translate 。

• top

  top 属性根据容器来计算，如果我们移动图片 img { top: 50%; }，则会把图片向下移动容器高德的 50%。

• translateY

  translateY 根据对象的高度来计算，因此如果我们移动图片 img { transform: translateY(-50%); } ，那么则会把图片向上移动图片高度的 50%。

把这两个属性组合起来就得到了我们需要的CSS。我们还需要对图片设置 position: relative;  属性，对容器设置 overflow: hidden; 属性。最终得到下面的结果：

.image-wrapper {
  height: 100px;
  overflow: hidden;
}

.image-wrapper img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

如果你没有使用 autoprefixer，我建议你使用它。这里是你需要的浏览器前缀：

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

实例

浏览器对 Transforms 的支持：