盒子的水平垂直居中（六种）

1------------------------------------------------------------------

.box1{

display:flex;

justify-content:center;

align-items:center;

 .box2{

     

  }

}

2------------------------------------------------------------------

.box1{

  position:relative;

 .box2{

     position:absolute;

     left:50%;

    right:50%;

    margin-left:负子元素一半宽度；

    margin-top:负子元素一半高度;

  }

}

3------------------------------------------------------------------

.box1{

   position:relative;

 .box2{

          position:absolute;

          left:50%;

          right:50%;

          transform:translate(-50%,-50%);

  }

}

4------------------------------------------------------------------

.box1{

      position:relative;

 .box2{

     position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

  }

}

5------------------------------------------------------------------

.box1{

   display:flex;

 .box2{

     margin:auto;

  }

}

6------------------------------------------------------------------

.parent{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
         }
      .son {
            background-color: pink;
            display: inline-block;
         }

-------------------------------------------------------------