水平垂直居中

方式一：

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

方式二：

.box2{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

方式三:

.box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }