直接设justify-items: center和align-items: center可使所有子项统一水平垂直居中；二者作用于整个网格容器，分别控制每列内子项水平对齐和每行内垂直对齐，无需单独设置子项样式。
grid布局中用justify-items和align-items控制整体居中
多行多列元素在display: grid容器里，想让所有子项统一水平+垂直居中，直接设justify-items: center和align-items: center就行。这两个属性作用于整个网格容器，影响所有子项，不需要给每个子项单独写样式。
常见错误是只写justify-content或align-content——它们只对整个网格轨道块起作用，当行/列数量固定、没有多余空间时，根本不会生效。
-
justify-items控制**每列内**子项的水平对齐（start / end / center / stretch） -
align-items控制**每行内**子项的垂直对齐 - 如果子项本身有
width或height限制，stretch会拉伸，center才真正居中
单个子项需要独立居中就用justify-self和align-self
当某一个div要和其他子项不同地居中（比如右下角图标、居中标题），就在它自己上加justify-self: center和align-self: center。这两个属性优先级高于容器的justify-items/align-items，且只影响当前元素。
注意：如果该子项设置了grid-column或grid-row跨多格，justify-self仍按它所占的**整个网格区域**居中，不是按内容盒。
立即学习“前端免费学习笔记（深入）”；
- 值可以是
auto（继承容器）、center、start、end - 不要和
text-align: center混淆——后者只对行内内容有效，对块级子项无用 - 若子项是flex容器，内部居中还得另配
justify-content和align-items
内容文字在grid子项里居中要额外处理
即使子项在网格中已居中，里面文字默认还是左对齐、顶对齐。这时候得在子项上加display: flex + justify-content: center + align-items: center，或者用text-align: center + line-height（仅限单行）。
别指望justify-items能影响子项内部的文字对齐——它只管子项盒子在网格线里的位置。
- 推荐用flex：兼容性好，一行代码搞定块级+文字双居中
- 避免用
margin: auto：在grid子项里它只在轴向上生效，且依赖宽高是否固定 - 如果子项是
img，记得设vertical-align: middle或套一层flex容器，否则基线对齐会留白
IE11兼容时justify-items不支持，得降级用margin:auto
IE11完全不支持justify-items和align-items在grid上的应用。如果必须兼容，只能把子项设为display: inline-block或绝对定位，再配合margin: auto或transform: translate(-50%, -50%)。
更稳妥的做法是：用@supports (display: grid)做特性检测，现代浏览器走grid方案，IE走fallback布局。
- IE中
margin: auto在grid子项里无效，必须配合position: absolute+top: 50%+left: 50%+transform - 别用
align-content: center试图“修复”IE——它只在多行网格且grid-auto-rows未填满容器时才可能有点效果，不可靠 - 实际项目里，如果目标用户基本不用IE，直接忽略这条，省掉一堆hack代码
