div+css实现子元素在父元素中垂直居中

方法一：父元素 display:table-cell;

.parent{
     
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.child{
     
	width:200px;
	height:200px;
	background:#f40;
	display:inline-block;
}

方法二：用绝对定位 + margin : auto;

.parent{
     
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	position:relative;
}
.child{
     
	width:200px;
	height:200px;
	background:#f40;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
} 

方法三：绝对定位 + margin

.parent{
     
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	position:relative;
}
.child{
     
	width:200px;
	height:200px;
	background:#f40;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px;
}

方法四： display:flex；

.parent{
     
	width:1000px;
	height:600px;
	border:1px solid #ccc;
	display:flex;
	justify-content:center;
	align-items:center;
}
.child{
     
	width:200px;
	height:200px;
	background:#d40;
}