如何保持浮动层水平垂直居中

如何保持浮动层垂直水平居中

1、弹性盒子

display: flex;
justify-content:center;     /* 水平居中 */
align-items:center;  /*垂直居中*/

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/* 600px */;
  background: #09c;
  position: relative;
}
.children{
    width: 100px;
    height: 100px;
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}