css垂直居中

案例如下：

        .parent{
            width:500px;
            height:500px;
            background-color: #ccc;
        }
            
        .child{
            background-color: red;
            color:#fff;
            width:100px;
            height:50px;
        }

<div class="parent" >
            <div class="child">
                啦啦拉
            </div>
        </div>

有以下几种方法

        /* 方法一  flex */
        .parent{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 方法二 position (在已知宽高情况下)*/
        .parent{
            position: relative;
        }    
        .child{
            position: absolute;
            left:calc(50% - 50px);
            top: calc(50% - 25px);
        }
        /* 方法三 position (在未知宽高情况下)*/
              .parent{
            position: relative;
        }    
        .child{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        } 
        /* 方法四 利用table-cell */
         .child{
            display:inline-block
        }
        .parent{
            vertical-align: middle;
            display:table-cell;
            text-align: center;
        }