盒子水平垂直居中的几种方式

盒子水平垂直居中的几种方式

    <div class="big" >
        <div class="lit" ></div>
    </div>

1

        .big{
            min-height: 100vh;
            width:100%;
            display: flex;
            background-color:red;
            flex-direction: column;
            justify-content: center;
        }
        .lit{
            width: 100px;
            height: 100px;
            background-color: #fff;
            margin: 0 auto;
        }

2

.big{
            min-height: 100vh;
            width:100%;
            display: flex;
            background-color:red;
        }
        .lit{
            width: 100px;
            height: 100px;
            background-color: #fff;
            margin: auto;
        }

3

position+translate