如何让已知高度的容器在页面中水平垂直居中 两个方法

<div class="box">center</div>

/*方法一*/

.box{

width: 500px;
height: 400px;
border: 1px solid #aaa;
position:absolute;
left:50%;
top:50%;
margin: -250px 0 0 -250px; 

}

/*方法二*/

.box{

width: 500px;
height: 400px;
border: 1px solid #aaa;
position:absolute;
left: calc((100% - 500px) / 2);
top: calc((100% - 400px) / 2);

}