如何保持浮动层水平居中

1、利用绝对定位和transform实现（也可以不固定宽高，子元素需添加内容）

<div class="parent">
    <div class="children">

    </div>
</div>

 <style>
    .parent{
      width: 200px;
      height: 300px;
      background-color: pink;
      position: relative;
    }
    .children{
    width: 100px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    background: black;
}
  </style>

2、利用flex弹性布（也可以不固定宽高，子元素需添加内容）

   <style>
 	 .parent {
     	 width: 200px;
      	height: 300px;
     	 background-color: pink;
      	justify-content: center;
      	align-items: center;
      	display: -webkit-flex;
   	 }
    .children{
      width: 100px;
      height: 150px;
      background-color: green;
    }
 </style>

3、利用display:table-cell

  <style>
    .parent {
      width: 400px;
      height: 100px;
      background: black;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .children{
      background: red;
      display: inline-block
    }
  </style>

4、利用宽度等分的方法实现水平居中

<style>
    .parent {
      width: 400px;
      height: 200px;
      background: black;
      position: relative;
    }
    .children{
      position: absolute;
      width: 200px;
      height: 200px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      background: red;
    }
  </style>

待续。。。。