水平、垂直居中

水平垂直居中

HTML

    <div class="box">
        <div class="item"></div>
    </div>

方法一

        .box {
   
            width: 500px;
            height: 500px;
            background-color: #eee;
             /* 方案一 
            结合 justify-content/justify-items 和 align-content/align-items 就有四种方案
            start | end | center | stretch拉伸，占满单元格的整个宽度（默认值）