css样式之垂直居中

margin:0 auto

样式：.box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
html结构：<div class="box box1">
    <span>垂直居中</span>
</div>

css样式：.box1{
            display: flex;
            justify-content:center;
            align-items:Center;
        }

position: absolute;
top: 50%;
left: 50%;
transform: translate("-50%","-50%");