align-items 在 grid 容器上无效，因其仅控制直接子项在交叉轴的位置，不作用于嵌套内容；要使文字垂直居中，需将单元格设为 flex 容器并配合 height 和 align-items: center。
align-items 控制的是网格项在行轨道内的垂直位置，不是“内容填充”——它不会拉伸或压缩单元格内部的文本、图片等嵌套内容；真要让文字在单元格里上下居中，得让单元格自己变成 flex 容器。
为什么 align-items: center 在 grid 容器上没效果？
常见错误现象：写了 align-items: center，但单元格里的文字还是贴着顶部。原因通常是以下之一：
- 父容器没设
display: grid（这个属性只在 grid 布局下生效） - 网格容器自身高度为
auto且没被内容撑开，导致交叉轴长度为 0 - 你试图居中的其实是嵌套在
<div>里的文字，而align-items只作用于直接子项（即那个<div>），不递归影响它的子元素
单元格内文字垂直居中的可靠写法
最稳的方式是把每个单元格（grid item）设为 display: flex，再用 align-items: center。这样控制粒度更细，也规避了 align-items 在 grid 容器上对嵌套内容无效的问题。
- 必须给单元格加
height或min-height，否则 flex 无法计算可用空间；常用height: 100%（前提是父 grid row 高度固定或有约束） - 如果还需水平居中，顺手加上
justify-content: center - 避免用
line-height居中——它只对单行文本有效，换行就错位
.cell {
display: flex;
align-items: center;
height: 40px;
padding: 0 12px;
}
place-items: center 能不能一步到位？
可以，但它只对 grid 容器的**直接子项**生效。如果你的单元格结构是 <div class="cell"><p>文本</p></div>，那 place-items: center 只会让 <p> 在单元格里居中——前提是 <p> 是该单元格的唯一子元素且没额外 margin/padding 干扰。
立即学习“前端免费学习笔记（深入）”；
- 若单元格内还有图标、按钮等复合结构，
place-items很难精准控制内部排布 - 它不解决“单元格自身高度不确定”的问题；仍需确保 grid row 有明确高度约束
- 兼容性没问题（Chrome 57+/Firefox 52+/Safari 10.1+），但语义上不如在单元格上显式用 flex 清晰
真正容易被忽略的点是：垂直居中从来不是单靠一个属性就能搞定的事。它依赖三层配合——grid 容器定义轨道、grid item 占据轨道、item 内部再布局。任一环节缺失（比如忘了给单元格设高度），align-items 或 place-items 就只是摆设。
