grid居中总结

.container {
    display: grid;
    place-items: center;    /* 1.网格项居中 */
    place-content: center;  /* 2.网格居中，网格项撑满网格则效果为网格项居中 */
}
.child {
    place-self: center;     /* 3.网格项居中 */
    margin: auto;           /* 4.网格项居中 */
}

4种写法均可实现居中

place-self属性是justify-self（水平）和align-self（垂直）属性的简写

place-items属性是justify-items（水平）和align-items（垂直）的简写

place-content属性是justify-content（水平）和align-content（垂直）的简写

参考:  如何使用CSS Grid 居中 div