Grid子元素文字对齐不准源于混淆层级：网格项在轨道中对齐用align-self/justify-self，文字在项内对齐用text-align/flex；需先明确目标是“项居中”还是“字居中”，再分层设置对应CSS。
Grid 布局中子元素内文字对齐不准，通常不是 Grid 本身的问题，而是混淆了两个不同层级的对齐控制：一个是网格项（grid item）在网格轨道中的对齐（用 align-self 或 justify-self），另一个是文本内容在该网格项内部的对齐（用 text-align、line-height、display: flex 等）。
确认对齐目标：是“项居中”还是“字居中”？
先明确你要解决的是哪一层：
-
想让整个子盒子（grid item）在单元格里上下/左右居中？ → 用
align-self（垂直）和justify-self（水平），或在容器上设align-items/justify-items -
想让子盒子内部的文字水平居中、垂直居中、两端对齐等？ → 这跟 Grid 无关，要靠子元素自身的 CSS，比如
text-align、display: flex+align-items/justify-content、或line-height配合固定高
常见错误：只设 align-self，忘了文字本身没居中
例如：
.container { display: grid; }
.item { align-self: center; } /* ✅ 项在行方向居中了 */
/* 但若 .item 是普通块级元素，文字仍默认左对齐、顶对齐 */这时需额外加：
立即学习“前端免费学习笔记（深入）”；
-
text-align: center→ 控制**行内内容水平对齐**（适用于文字、图片等） - 若需**文字垂直居中**，且子元素有固定高度，可设
line-height: [同高] - 更可靠的方式：给子元素设
display: flex; align-items: center; justify-content: center;，再配text-align: center（兼顾多行文本）
text-align 在 grid item 中是否生效？
会生效，但前提是：
- 子元素是块级容器（如
div、p），且未设置display: flex或display: grid覆盖其内部布局 -
text-align只影响**行内级内容的水平对齐**，不影响块级子元素的位置，也不控制垂直对齐 - 如果子元素用了
display: flex，那text-align就失效了，此时要用justify-content和align-items
推荐组合写法（兼顾灵活与兼容）
让一个 grid item 内文字真正水平+垂直居中：
.item {
align-self: center; /* 网格项在行轴居中 */
justify-self: center; /* 网格项在列轴居中（可省略，由 justify-items 统一控） */
text-align: center; /* 文字水平居中（对单行/多行都有效） */
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中（flex 容器内） */
align-items: center; /* 水平居中（flex 容器内，强化 text-align 效果） */
}注意：display: flex 会让 text-align 对齐效果被覆盖，所以这里 align-items: center 才是关键；text-align: center 主要是为多行文本换行时保持居中。
不复杂但容易忽略：对齐是分层的，理清“谁对齐谁”，问题就解决了一大半。
