CSS设置居中的方法

​​​​​​

•  position（子元素宽高度已知）

  .parent{
      position:relative;
  }
  .child{
      width:100px;
      height:100px;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
  }

• position（子元素宽高度未知）

  .parent{
      position:relative;
  }
  .child{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
  }

• flex布局（子元素需要宽高度）

  .parent{
      display:flex;
      justify-content:center;
      align-items:center;
  }

• table-cell实现垂直居中（子元素可以不是块元素）

  .parent{
      display:table-cell;
      vertical-align:middle;
  }