使用css让图片自适应居中

通过CSS，让图片自适应居中，效果如下：

代码演示

实现这种特效有两种方式。

第一种

.image-box {
  display: flex;
  width: 500px;
  height: 400px;
}

.image {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

第二种

.image-box {
  width: 500px;
  height: 400px;
  text-align: center;
  line-height: 398px;
}

.image {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}