多行文本在grid单元格中垂直居中失效，主因是网格项未撑满行高或内部非块级布局；需设align-items: stretch并让网格项用flex实现justify-content: center。
grid 容器中多行文本垂直居中失效的常见原因
多行文本在 grid 单元格里不居中，往往不是文本本身的问题，而是单元格的对齐规则没生效。默认情况下，align-items 和 justify-items 控制的是**网格项（grid item）** 的对齐，而文本只是项内的内容——如果项自身没有高度、或内部是普通流式布局，对齐就会“看起来没反应”。
-
align-items: center对文本无效，除非该网格项设置了明确高度（如height或min-height），否则它默认“包裹内容”，没有可居中的空间 - 若文本用
display: inline（比如<span>），align-items完全不作用于内联元素，必须确保文本容器是块级（如<p>、<div>）且占据整格 - 父容器未设
display: grid或遗漏grid-template-rows，导致行轨道未定义，align-items失去作用目标
正确做法：用 justify-content + align-content + 内部 flex 配合
单纯靠 align-items 很难稳定控制多行文本。更可靠的方式是让网格项自身成为弹性容器，把对齐逻辑下沉一级：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto; /* 或明确高度，如 100px */
align-items: stretch; /* 让项撑满行高（关键）*/
}
<p>.grid-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /<em> 文本左对齐，避免居中截断 </em>/
padding: 12px;
}-
align-items: stretch是grid默认值，但显式写出能提醒你：它让每个项在行方向上拉伸——这是后续flex居中的前提 -
justify-content: center在flex中才真正作用于多行文本的垂直中心位置 - 避免对
grid-item设置height: 100%，容易因父级无明确高度而塌陷；优先用min-height或依赖grid-template-rows
替代方案：用 writing-mode + text-align 实现单侧对齐
如果只是想让多行文本在单元格内顶部对齐、底部对齐或居中，且不希望引入 flex，可以用 writing-mode 配合 text-align 绕过块级对齐限制：
.grid-item {
writing-mode: vertical-lr; /* 把文本转为竖排 */
text-align: center; /* 此时 center 控制的是“原水平方向”的垂直位置 */
transform: rotate(90deg); /* 再转回来，等效于垂直居中 */
}- 这个技巧本质是“欺骗”浏览器对齐逻辑，适合固定尺寸单元格，响应式下需配合
transform-origin调整锚点 - 不推荐用于可读性敏感的正文，仅适用于图标旁标签、卡片标题等短文本场景
- 注意
writing-mode在旧版 Safari 中需加-webkit-前缀
容易被忽略的边界情况
即使上述都配置正确，仍可能出问题——多数源于隐式尺寸计算和盒模型干扰：
立即学习“前端免费学习笔记（深入）”；
-
line-height过大或为normal时，浏览器按字体度量计算基线，导致视觉偏移；建议统一设为无单位数值（如line-height: 1.4） - 单元格内存在
margin（尤其是margin-top/bottom）会破坏flex的居中基准，改用padding或gap - 使用
grid-area合并多格时，align-self会覆盖align-items，但只对合并后的整体生效，内部文本仍需独立处理
实际调试时，先打开浏览器开发者工具，检查网格项是否真的占满轨道高度（看 computed height），再确认其子元素是否为 block 级且无 margin 干扰——对齐异常十有八九卡在这两步。
