让div水平垂直居中

div水平并垂直居中

网格布局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部分：

grid布局下棋出布局方式嗷