总结：css保持浮层水平垂直居中的几种方法

1.利用flexbox布局

 .parent{
     width: 100%;
     height: 37.5rem;
     background: #09c;
     display: flex;
     justify-content:center;     
     align-items:center;  
         
 }
 .children{
     width: 100px;
     height: 100px;
     background-color: #eee;
     border: 1px dashed #000;
     margin: 5px;
     
     
 }

2.利用绝对定位与transform

 .parent{
     position: absolute;
     background-color: #eee;
     width: 100%;
     height: 100%;
 }
 .parent .children{
     background-color: #751;
     width: 200px;
     height: 200px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%,-50%);
 }

3.将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。

 .parent{
     position: relative;
     background-color: #eee;
     height: 600px;
     width: 100%;
 }
 .parent .children{
     background-color: #751;
     width: 200px;
     height: 200px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -100px 0 0 -100px;
 }

4.利用定位与margin：auto

 .parent{
     width: 100%;
     height: 37.5rem;
     background: #09c;
     position: relative;
 }
 .children{
     width: 100px;
     height: 100px;
     background-color: #eee;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
 }