css解决图片宽高比不固定时，图片居中的问题

web开发中，经常会遇到图片居中显示的问题，如果图片的尺寸固定还好说，如果不固定，有的图片是宽度比较大，有的图片是高度比较大，碰到这种情况，UI就会和你说：“这个不行，我要居中的！”
抱着万马奔腾的心情，千幸万苦之后，找到了下面这种解决方案，只需要写点CSS

<span className="span">
  <img
    src=""
    className="img"
    alt=""
  />
</span>

.span {
  display: inline-block;
  width: 120px;
  height: 120px;
}
.img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}