CSS技巧-01 如何實現一個元素在頁面中水平垂直居中

（1）知道子元素的寬高

<!--父元素相對定位-->
<!--子元素絕對定位-->
.child{
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-50px;
      margin-top:-50px;
}

 （2）不考慮子元素的寬高

<!--父元素不能有定位-->
<!--子元素絕對定位-->
.child{
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
    }

 （3）不用考慮子元素的寬高，且當子元素沒有寬高也能居中（兼容性不是很好）

<!--父元素不能有定位-->
<!--子元素絕對定位-->
.child{
      background-color: tomato;
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

 （4）給父元素設置display:flex

body{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
}

 （5）通過JS實現：

獲取當前屏幕的寬高，通過DOM添加css樣式達到效果

（6）父元素有固定寬高

同時父元素設置：

body{
      height: 988px; width: 1000px;
      display:table-cell;
      vertical-align: middle;
      text-align: center;
    }
子元素需要設置為inline-block
.child{
      display: inline-block;
}