<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>

　　　　.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;

        }