三种方法实现垂直居中

这里主要写了三种方法
一种是给父元素设置position：relative；
子元素设置absolute，然后上下左右都为0，margin：auto，这便成了脱离文档的垂直居中。

   <div class="main">
<div class="container"></div>

.main{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
.container{
    width: 50px;
    height: 50px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
}

用定位的方式，子元素left 和 top的50%，再利用margin减去子元素的宽高一半的值

   <div class="main">
<div class="container"></div>


.main{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
.container{
    width: 50px;
    height: 50px;
position: absolute;

top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;

background-color: red;
}

第三种是利用flex来做，这种的话，设置父元素为flex，同时设置align-itmes和justify-content都为center就可以

 <div class="main">
<div class="container"></div>

.main{
width: 400px;
height: 400px;
display: flex;
  align-items: center;
    justify-content: center;
border: 1px solid #465468;
}
.container{
    width: 50px;
    height: 50px;
  
    background-color: red;
}