css 垂直水平居中

dom结构都是：

<div class="wrap">

    <div class="center"></div>

</div>

1. position + margin （子节点要固定宽高）

    .wrap {
      width: 200px;
      height: 200px;
      background: yellow;
      position: relative;
    }
    .wrap .center {
      width: 100px;
      height: 100px;
      background: green;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    
    兼容性：主流浏览器都兼容，ie6不兼容
    
   

2. display：table-cell （子节点不需要固定宽高）

     .wrap {
          width: 200px;
          height: 200px;
          background: yellow;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
        }
   
        .center {
          display: inline-block;
          background: green;
        }
   
    兼容性：不兼容IE6/7
   

3. position + transform （子节点不需要固定宽高）

   .wrap {
     position: relative;
     background: yellow;
     width: 200px;
     height: 200px;
   }
   .center {
     position: absolute;
     background: green;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
   
   兼容性：IE9不兼容transform，手机端表现良好
   

4. display: flex (子节点不需要固定宽高)

   .wrap {
       background: yellow;
       width: 200px;
       height: 200px;
       display: flex;
       align-items: center;
       justify-content: center;
     }
     .center {
       background: green;
     }
     
    兼容性：手机端表现良好
   

5. display：flex + margin （子节点不需要固定宽高）

   .wrap {
       background: yellow;
       width: 200px;
       height: 200px;
       display: flex;
     }
     .center {
       background: green;
       margin: auto;
     }
     
     兼容性：手机端表现良好
   

6. display：grid + margin （子节点不需要固定宽高）

   .wrap {
       background: yellow;
       width: 200px;
       height: 200px;
       display: grid;
     }
     .center {
       background: green;
       margin: auto;
     }    
     
   兼容性：手机端表现良好
   

7. 纯position （需要固定宽高）

     .wrap {
         background: yellow;
         width: 200px;
         height: 200px;
         position: relative;
     }
   
     /**方法一**/
   
     .center {
         background: green;
         position: absolute;
         width: 100px;
         height: 100px;
         left: 50px;
         top: 50px; 
     }
   
     /**方法二**/
   
     .center {
         background: green;
         position: absolute;
         width: 100px;
         height: 100px;
         left: 50%;
         top: 50%;
         margin-left:-50px;
         margin-top:-50px;
     }
   
     兼容性：适用于所有浏览器
   
     方法六中的方法一计算公式如下：
   
     子元素（conter）的left值计算公式：
     left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
     
     子元素（conter）的top值计算公式：
     top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
   
     方法二计算公式：
     left值固定为50%; 
     子元素的margin-left= -（子元素的宽/2）=-100/2= -50px; 
     
     top值也一样，固定为50%
     子元素的margin-top= -（子元素的高/2）=-100/2= -50px;