如何让CSS Grid布局中的文本在所在网格行内垂直居中？

解决方案 #

你出现的对齐问题由两个配置错误导致，修改#grid选择器的CSS规则即可解决：

1. 原代码给网格行设置了固定高度50px，不足以容纳标题+段落的内容，导致内容溢出错位，需要改为自适应高度
2. align-content属性用于控制整个网格容器在父级的对齐，而非网格单元格内的子项对齐，需要替换为align-items: center实现单元格内容垂直居中

修改后的CSS代码如下：

#grid {
    display: grid;
    grid-template-columns: 100px auto;
    /* 替换固定行高为自适应，匹配内容高度 */
    grid-template-rows: auto auto auto;
    grid-column-gap: 50px;
    grid-row-gap: 80px;
    margin-left: 50px;
    /* 新增：控制所有网格子项在单元格内垂直居中 */
    align-items: center;
    margin-top: 100px;
}

内容的提问来源于stack exchange，提问作者Sara York