css-设置一个盒子水平垂直居中的方法

这里介绍三种方法：

已知盒子的宽度，高度：
    div{
        position:absolute;
        width:500px;
        height:500px;
        margin:auto;
        top:0;
        left:0;
        buttom:0;
        right:0;
    }

这是一个经典方法：
    .parent{
        position:relative;
    }
    .child{
        width:500px;/*可以不知道宽高*/
        height:500px;
        positon:absolute;
        top:50%;/*相对于父级的50%*/
        left:50%;/*相对父级的50%*/
        transform:translate(-50%,-50%);/*相对于自身的50%*/
    }

使用css3的flex布局
    div{
        display:flex;
        juestify-content:center;
        align-items:center;
    }