CSS多种方式实现元素水平垂直居中

html结构:

    <div class="center">确定宽高水平垂直居中</div>
    <div class="center2">不确定宽高水平垂直居中</div>
    <div class="center3">确定宽高水平垂直居中2</div>
    <div class="center4"><span>flex水平垂直居中</span></div>
    <div class="center5"><span>table-cell水平垂直居中</span></div>

css样式:

.center{
            position: absolute;
            background: blue;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        .center2{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -150%);
            background: red;
        }
        .center3{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: green;
        }
        .center4{
            background: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }
        .center5{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            height: 300px;
            width: 400px;
            background: red;
        }