div垂直居中的方法

div 垂直居中

html:
<div class="box">
	<div></div>
</div>

css:
/* 方法一 */
.box{
	width:200px;
	height:200px;
	background: #ff6699;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;	
}

/* 方法二*/
.box{
	width:200px;
    height: 200px;
    background:green;
    position: absolute;
    margin-left:-100px;
    magin-top:-100px;
}

/* 方法三 */
/* 父级容器指定高度 */
.box{
	display:flex;
	justify-content:center;
	align-items:center;
	height:600px;
}
.box>div{
	width:200px;
	height:200px;
	background:green;
}

/* 方法四*/
.box{
	width:200px;
	height:200px;
	position:absolute;
	background:green;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}