不定宽高水平垂直居中

方案一：transform:translate(-50%,-50%);

    <style type="text/css">
        .wrap{
            border: #000 1px solid;

            position: relative;
        }
        .box{
            border: 1px solid red;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

    <div class='wrap'>
        <div class='box'>哈哈</div>
    </div>

方案二：弹性盒模型

    <style type="text/css">
        .wrap{
            border: #000 1px solid;

            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

方案三：table-cell

    <style type="text/css">
        .wrap{
            border: #000 1px solid;

            display: table;
        }
        .box{
            border: 1px solid red;
            
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            line-height: 1;
        }
    </style>