原来使用flex布局实现水平垂直中心，今天知道了grid也很容易使用。 参考cdbb大神的博客，简单记录学习；
divclass=' container ' divclass=' item '1/divdivclass=' item '2/divdivclass=' item '3/divdivclass=' item ' /* grid-template-columns属性定义每行的列宽，而grid-template-rows属性定义每行的高度。 * /网格模板列3360报告(460px )； 网格模板行3360报告(260px )； /* grid-gap属性是grid-column-gap和grid-row-gap的简称，grid-row-gap属性用于设置行与行之间的间距(行间距)，grid-column-column item位置justify-items属性设置单元格内容的水平位置(左中右)，align-items属性是单元格内容的垂直位置(上中下) ) */align-items: center； Justify-items3360中心； /* justify-content属性表示容器中整个内容区域的水平位置(左中右)，align-content属性表示整个内容区域的垂直位置(上中下) )。 */justify-content :中心； 对齐内容：中心； width: 100%； height: 500px； background: #f3f3f3； } .item { width: 30px； height: 30px； 显示：网格； border : 1px固态红色； 内容：中心； 对齐内容：中心； 关于内容：中心； 对齐内容：中心； justify-content控制整个内容区域在容器中的位置
align-items3360中心； Justify-items3360中心； 简单来说，-items控制单个单元格的位置
这是未设置center的状态
这是安装了justify-content: center； 对齐内容：中心；
您可以看到整个div都在中心，但每个div在自己所在的单元格中位于左上角
在此安装align-items: center； Justify-items3360中心； 单击可使单元格内居中
3 .通常，item的文字也需要水平和垂直，所以在item上也设置grid就可以实现
如果未安装ps:请执行以下操作
见3http://www.Ruan Yifeng.com/blog/2019/03/grid-layout-tutorial.html