align-items: center 在 grid 容器上没效果，是因为它只控制网格项在行轨道内的对齐，不作用于项内嵌套内容；若单元格内容需居中，应让该单元格自身设为 display: flex 并使用 align-items: center。
align-items: center 在 grid 容器上为什么没效果
因为 align-items 控制的是**整个网格容器内所有行轨道（grid rows）的对齐方式**，它只在容器是 display: grid 且子元素是直接子项（grid items）时才起作用。如果单元格里套了一层 <div> 或文本被包裹在其他标签里，而你又没给那层内部容器设高度或 flex 布局，<code>align-items: center 就只是把“那整块内容”在行方向上居中——但内容本身可能还是顶部贴边。
常见错误现象：align-items: center 写了，文字依然顶着单元格上边；检查 computed styles 发现 grid item 高度是 auto，没有撑开。
- 确保父容器是
display: grid，且目标单元格是它的**直接子元素** - 如果单元格内容需要独立控制对齐（比如里面还有图标+文字），建议让该单元格自身也变成
display: flex，再用align-items: center - 不要依赖 grid 容器的
align-items去居中“单元格内部的任意嵌套内容”
grid 单元格内文字垂直居中的可靠写法
最稳的方式不是靠容器的 align-items，而是让单元格自己成为 flex 容器。这样控制粒度更细，兼容性也好（Chrome 29+/Firefox 20+/Safari 10.1+ 都支持）。
使用场景：表格式布局中，每个 <div class="cell"> 需要文字上下居中，不管内容是一行、两行还是带 icon 的复合结构。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>给单元格加 <code>display: flex + align-items: center + justify-content: center（后者可选，如需水平也居中）
height 或 min-height，否则 flex 无法计算可用空间；常用 height: 100%（前提是父 grid row 高度固定或有约束）line-height 居中——它只对单行文本有效，换行就错位示例：
.cell {
display: flex;
align-items: center;
height: 40px;
padding: 0 12px;
}
align-items 和 justify-items 混用时的误区
align-items 管垂直（cross axis），justify-items 管水平（main axis），但它们都只作用于**grid item 自身的盒模型位置**，不是 item 内部内容。很多人以为设了这两个，里面的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 就会自动居中，其实不会。
参数差异：justify-items: center 让每个 grid item 在列轨道内水平居中；align-items: center 让每个 item 在行轨道内垂直居中——但 item 的内容是否居中，仍取决于 item 自己的布局方式。
- 如果 grid item 是
div且无额外样式，它默认是display: block，内容依然按普通文档流渲染 - 想让 item 内部文字居中，要么让它变 flex，要么用
text-align: center（仅限行内内容）+line-height == height（仅限单行） - 不要在 grid 容器上同时滥用
align-items和对每个 item 单独设 flex——容易叠加出意料之外的偏移
IE11 下 grid 垂直居中的替代方案
IE11 的 display: grid 不支持 align-items 和 justify-items（只支持旧语法 -ms-grid），所以不能依赖这些属性做居中。此时最可行的 fallback 是用 display: table-cell + vertical-align: middle。
性能影响：table-cell 渲染路径比 flex 稍重，但在现代浏览器中几乎不可测；关键是它在 IE11 中稳定、无需 JS 补丁。
- 对单元格设
display: table-cell、vertical-align: middle、width和height - 必须配合
display: table的父容器（即 grid 容器退化为 table 布局，意味着放弃 grid 的响应式能力） - 更现实的做法：用 @supports 检测
display: grid支持，只对不支持的 UA 启用 table-cell 规则
示例：
@supports not (display: grid) {
.grid { display: table; }
.cell { display: table-cell; vertical-align: middle; }
}
实际项目里最容易被忽略的，是 grid item 的 height 是否真正生效——很多时候它被 min-content 或 auto 卡住，导致 align-items 失去参照基准。先确认高度，再谈居中。
