CSS技巧-01 如何实现一个元素在页面中水平垂直居中

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

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

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

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

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