css grid布局实现水平垂直居中 文字水平垂直居中

原来一直使用flex布局来实现水平垂直居中，今天才知道还有grid也是很好用的，参考阮一峰大神的博客，简单记录一下学习；

<div class="container">              
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
</div>

   .container {
        display: grid;
        /* grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。 */
        grid-template-columns: repeat(4, 60px);
        grid-template-rows: repeat(2, 60px);
        /* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式， 
        grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
        我设置的是10 行与行之间 列与列之间 都是10*/
        grid-gap: 10px;
         /* item在这个单元格中的位置justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下） */
        align-items: center;
        justify-items: center;  
        /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 */
        justify-content: center;
        align-content: center;

        width: 100%;
        height: 500px;
        background: #f3f3f3;
    }
    .item {
        width: 30px;
        height: 30px;
        display: grid;
        border: 1px solid red;
        justify-content: center;
        align-content: center;
    }

1. 关于 justify-content: center; align-content: center; justify-content是控制整个内容区域在container中的位置的

2. align-items: center; justify-items: center;简单来说-items是控制单个单元格的位置的

   这是未设置任何center的状态
   这是设置了 justify-content: center; align-content: center;
   可以看到整体居中了 但是每个div在自己所在的单元格内还是处在左上角的位置的
   
   这里设置里align-items: center; justify-items: center;，单元格内就居中了
   3.一般情况下需要item中的文字也水平垂直 所以我给item也设置了grid 就可以实现了
   ps:如果没有设置 就会是下面的情况
   
   参考 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html