图片水平垂直居中

div宽高都是200px,里面图片宽高都小于200px,水平垂直居中

<!--通过背景图-->
.box1{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	background: url(./test.png) no-repeat center center;
}
<div class="box1"></div>

<!--通过vertical-align: middle;-->
.box2{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	line-height: 200px;
	text-align: center;
}
.box2 img{
	vertical-align: middle;
}
<div class="box2">
	<img src="./test.png">
</div>

<!--定位 + margin：auto；-->
.box4{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	text-align:center;
	position:relative;
}
.box4 img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
<div class="box4">
	<img src="./test.png">
</div>