圖片在div中居中顯示

1、固定圖片寬高，垂直居中顯示在div中

注意：div在div中垂直居中同樣適用

.images{
	position:relative;
	width:400px;
	height:400px;
	overflow:hidden;
}
.images img.one{
	position:absolute;
	width:200px;
	height:200px;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px;
}
<div class="images">
	<img class='one' src='1.png' alt=''>
</div>

2、圖片自適應垂直居中顯示在div中

.images{
	position:relative;
	width:400px;
	height:400px;
	overflow:hidden;
}
.images img.two{
	position: absolute;
    max-width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
<div class='images'>
	<img class='two' src='1.png' alt=''>
</div>