HTML盒子水平垂直居中

    .father{
            width:300px;
            height:200px;
            border:1px solid red;
            margin: 100px auto;
            position: relative;
        }
        .son{
            width:70px;
            height:50px;
            background: skyblue;
            position: absolute;
            left:50%;
            margin-left: -35px;


        }

margin-left: -35px;

.son{
            width:70px;
            height:50px;
            background: skyblue;
            position: absolute;
            left:50%;
            /*margin-left: 20%;*/
            transform: translateX(-50%);


        }