子盒子垂直和水平居中的方法。

1.定位+margin

1.加了绝对定位的盒子不能通过 margin：0 auto  水平居中， 但是可以通过以下计算方法实现水平和垂直居中。

1. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
2. top: 50%; 让盒子的上侧移动到父级元素的垂直中心位置。
3. margin-left: -100px; 让盒子向左移动自身宽度的一半。
4. margin-top: -100px; 让盒子向上移动自身宽度的一半。

.div {
    /* 子绝父相 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
}

2.上下左右

1. top: 0; left: 0; right: 0; bottom: 0;   这行代码让子盒子知道父级元素的上下左右4个边。
2. margin: auto;   从上下左右填充。

.son {
            /* 子绝父相 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
}

 3.定位+平移 translate (推荐使用)

1. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
2. top: 50%; 让盒子的上侧移动到父级元素的垂直中心位置。

3. transform: translate(-50%, -50%);   让盒子想左平移自身宽度的一半。

.div {
      /* 子绝父相 */
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
}

 margin移动盒子会影响其余的盒子。把其他人挤走。
 位移translate移动盒子不会影响其他的盒子。不脱标。 

4.flex布局

1. display:flex; 给父盒子转换模式flex。
2. justify-content: center;  沿主轴居中排列。
3. align-items: center;  沿侧轴居中排列。

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