用 display: grid 实现多行文字居中需同时设置容器高度（如 height 或 min-height）和文字容器的 text-align: center，因为 align-items 只在有明确高度时控制网格项垂直居中，而 text-align 才负责多行文字的水平居中。
用 display: grid 实现多行文字居中，align-items 是关键但不够
单纯给容器设 display: grid 并加 align-items: center，只能让文字在**单个网格项内**垂直居中——前提是这个网格项有明确高度。如果容器是 height: auto 或内容撑开高度，align-items 就没效果。
常见错误现象：align-items: center 写了但文字还是贴顶，或换行后左右不对齐。
- 必须显式设置容器高度（如
height: 200px）或最小高度（min-height），否则align-items无空间可“居” -
align-items控制的是**网格项**（grid item）在**行轴方向**的对齐，不是控制文字本身；它对文字的垂直位置起效，但不影响换行后的水平对齐 - 多行文字要水平居中，仍需在文字所在元素上加
text-align: center，否则换行后每行会左对齐
text-align: center 必须作用于文字容器，不是 grid 容器
text-align 不继承自 grid 容器，它只对块级子元素或内联内容生效。如果你把文字直接写在 .container 里，而没包一层 <div> 或 <p>，text-align 可能被忽略或行为异常。
使用场景：响应式卡片、公告栏、模态框标题等需要随屏幕缩放仍保持多行居中的地方。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：grid 容器里嵌套一个
<div class="content">多行文字</div>，然后对.content设text-align: center - 错误写法：只在
.container上写text-align: center，但里面是纯文本节点（无包裹元素） - 若用
<p>标签，默认是块级，text-align生效；若用<span>，需先设display: block
为什么不用 align-content: center？它不适用于单行文字
align-content 只在 grid 容器产生**多行网格轨道**（即内容自动换行到多行，或设置了 grid-auto-rows + 多个子项）时才起作用。它控制的是**行与行之间的整体分布**，不是单个文字块的位置。
容易踩的坑：看到“多行”就下意识加 align-content: center，结果完全没反应。
- 仅有一个文字块（单个 grid item）时，
align-content无效 —— 它不管 item 内部内容 - 只有当你用
grid-template-columns+ 多个子元素，且容器高度富余，才可能触发多行轨道 - 真正该用
align-content的场景是：网格卡片列表，在固定高容器中让几行卡片整体垂直居中
完整可用的最小代码结构
以下组合能稳定实现任意长度多行文字在固定高容器中水平+垂直居中：
.container {
display: grid;
align-items: center;
height: 180px;
border: 1px solid #ddd;
}
.content {
text-align: center;
margin: 0;
line-height: 1.4;
}
注意：.content 不需要设宽高，也不需要 justify-self；text-align 管水平，align-items 管垂直，二者分工明确。最常被忽略的是容器高度缺失和文字未包裹——这两点一错，整个居中就失效。
