没有固定高的盒子，在div中垂直水平居中的方法

• 方法一：使用flex布局

.box{
	width:800px;
	height:800px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.child{
	padding:50px;
	background:pink;
}

<div class="box">
	<div class="child">子元素</div>
</div>

• 方法二：使用transform: translate(-50%,-50%);

.box{
	width:800px;
	height:800px;
	position:relative;
}
.child{
	padding:50px;
	background:pink;
	position:absolute;
	left:50%;
	top:50%;
    transform: translate(-50%,-50%);
}

<div class="box">
	<div class="child">子元素</div>
</div>

• 方法三：使用display：table

.box{
   width:800px;
   height:800px;
   display: table;
}
.child{
   padding:50px;
   background:pink;
   display:table-cell;
   vertical-align: middle;
   text-align: center;
}

<div class="box">
	<div class="child">水平垂直居中</div>
</div>