实现水平居中、垂直居中
1.水平居中
首先，对于行内元素来讲，text-align:center即可实现水平居中；
对于块级元素来讲，如果不设置行内元素的宽度，一般情况下它是独占一行的，这种情况下是不用考虑水平居中的。所以对于块级元素讲水平居中的时候，一般是其宽度值被设置了。如果要实现一个块级元素的水平居中， margin：0 auto 即可。
而如果要实现多个块级元素在一行的水平居中，可以为它们的父类设置text-align：center，让块级元素以inline-block的形式存在。
.body-div{
text-align: center;
}
.item{
display: inline-block;
}
<body>
<div class="body-div">
<div class="item">Box-1</div>
<div class="item">Box-2</div>
</div>
</body>
2.水平+垂直居中
1）绝对定位;
.body-div{
position: relative;
height: 600px;
}
.item{
position: absolute;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
2）flex(伸缩盒)
.body-div{
display: flex;
justify-content: center; /*容器内的元素将会居中*/
align-items: center;
}
