栅格布局如何实现水平居中和垂直居中

栅格布局可以通过以下方式实现元素的水平居中和垂直居中：

1. 水平居中：使用`justify-content: center`实现水平方向上的居中。

   .container {
     display: grid;
     justify-content: center; /* 水平居中 */
   }

2. 垂直居中：使用`align-items: center`实现垂直方向上的居中。

   .container {
     display: grid;
     align-items: center; /* 垂直居中 */
   }

3. 同时实现水平居中和垂直居中：可以将上述两种方式结合使用。

   .container {
     display: grid;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

需要注意的是，以上方法都是针对容器内部的元素进行居中处理。如果要使整个容器水平垂直居中，可以使用绝对定位和`transform`属性实现。