温故而知新之CSS篇-盒子水平垂直居中的方法

盒子水平垂直居中的方法
（1）使用定位的方法（三种方法）：
第一种方法：（已知盒子的宽高，需要计算盒子的宽高）

    

      
儿子
    

第二种方法：（盒子必须要有宽高，但是不需要计算宽高）

 .son{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 100px;
        background-color: pink;
      }

第三种方法：（不需要知道盒子的宽高）

.son{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: pink;
      }

（2）使用display:flex的方法：

.father{
        display: flex;
        justify-content: center;
        /* x轴 */
        align-items: center;
        /* y轴 */
        width: 500px;
        height:300px;
        border: 1px solid blue;  
      }
      .son{
        width: 200px;
        height: 100px;
        background-color: pink;
      }

（3）使用JavaScript的方法：

    

      js实现垂直居中