一、flex布局
flex布局较适用于移动端的布局
//图片垂直居中
display:flex;
align-items:center
我一般在写小程序,app时会使用这种方式
二、采用定位的方式
这种方式相对于pc端兼容性很好
<div class="fatherimg">
<img src="../images/a.png" class="img" />
</div>
.fatherimg{
width:300px;
height:400px;
position:relative;
}
.fatherimg img{
positions:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%;);
}
如果想让图片自适应,下面这种方式挺适用的,前段时间在写响应式网站时感觉很方便
.fatherimg img{
display: inline-block;
max-width: 100%;
height: auto;
}
三、display:table
<div class="fatherimg">
<div class="img"><img src="../images/a.png" /></div>
</div>
.fatherimg{
width:300px;
height:400px;
display:table;
}
.fatherimg .img{
display:table-cell;
vertical-align:middle;
}
.fatherimg .img img{
width:200px;
height:200px;
}