align-items 在 grid 容器上无效，因其仅控制直接子项在交叉轴的位置，不作用于嵌套内容；要使文字垂直居中，需将单元格设为 flex 容器并配合 height 和 align-items: center。

align-items 控制的是网格项在行轨道内的垂直位置，不是“内容填充”——它不会拉伸或压缩单元格内部的文本、图片等嵌套内容；真要让文字在单元格里上下居中，得让单元格自己变成 flex 容器。

为什么 align-items: center 在 grid 容器上没效果？

常见错误现象：写了 align-items: center，但单元格里的文字还是贴着顶部。原因通常是以下之一：

• 父容器没设 display: grid（这个属性只在 grid 布局下生效）
• 网格容器自身高度为 auto 且没被内容撑开，导致交叉轴长度为 0
• 你试图居中的其实是嵌套在 <div> 里的文字，而 <code>align-items 只作用于直接子项（即那个 <div>），不递归影响它的子元素 <h3>单元格内文字垂直居中的可靠写法</h3> <p>最稳的方式是把每个单元格（grid item）设为 <code>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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>，那 place-items: center 只会让 <p></p> 在单元格里居中——前提是 <p></p> 是该单元格的唯一子元素且没额外 margin/padding 干扰。

  • 若单元格内还有图标、按钮等复合结构，place-items 很难精准控制内部排布
  • 它不解决“单元格自身高度不确定”的问题；仍需确保 grid row 有明确高度约束
  • 兼容性没问题（Chrome 57+/Firefox 52+/Safari 10.1+），但语义上不如在单元格上显式用 flex 清晰

  真正容易被忽略的点是：垂直居中从来不是单靠一个属性就能搞定的事。它依赖三层配合——grid 容器定义轨道、grid item 占据轨道、item 内部再布局。任一环节缺失（比如忘了给单元格设高度），align-items 或 place-items 就只是摆设。