CSS 实现图片 水平居中 垂直居中 自适应居中

html代码结构

<!--html-->
<div class="warp">
  <img src="/test.png" class="img">
</div>

css

.warp {
    width: 500px;
    height: 350px;
    line-height: 350px;
    text-align: center;
    background: #ccc;
}
.img{
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 100%;
    vertical-align: middle;
}

横图效果

横图效果

竖图效果

竖图效果

小图效果

小图效果