让div水平垂直居中

div水平并垂直居中

<!-- 
    1.上下左右0，margin是auto
    2.上左50%，平移-50%
    3.弹性盒布局
    display：flex；
    justify-content：center；
    align-items：center；
    4.给父标签text-align:center;line-height:父标签的高;给子标签display:inline-block;vertical-align:middle;给子标签旁边添加空span
    5.网格布局
 -->

网格布局css：

.small{
    width: 100px;
    height: 100px;
    background-color: #f00;

    grid-area: a;
}
.box{
    width: 300px;
    height: 300px;
    border: 1px solid #000;

    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-template-areas: ". . ." ". a ." ". . .";
}

html部分：

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

grid布局下棋出布局方式嗷