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

2020-04-01 本文已影响0人江火渔枫

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;
}