让图片垂直居中的方式

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