盒子水平垂直居中的4种方法

不确定宽度：

第一种

        div{
            padding: 30px;
            background: orange;
            font-size: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

第二种

        div{
            height: 300px;
            padding: 30px;
            background: orange;
            font-size: 30px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

确定宽度：
第一种

        div{
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

第二种

        div{
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left:0;
            right:0;
            top: 0;
            bottom: 0;
            margin: auto;
        }