如何为使用grid-template-rows定义的CSS Grid行元素通过line-height实现文本垂直居中

我完全懂你的困扰——当用grid-template-rows的fr单位定义行高时，靠padding或者百分比line-height确实没法优雅实现文本垂直居中，毕竟fr是基于容器剩余空间的动态比例，不是固定的像素或百分比高度。这里有几个原生CSS的解决方案，完美适配你要保持布局比例动态准确的需求：

方案一：利用Grid容器的对齐属性（最简洁） #

Grid布局本身就自带强大的对齐能力，你只需要在父容器#profile中添加一行align-items: center;，就能让所有Grid子元素（包括你的.info类元素）自动垂直居中，完全不需要依赖line-height或padding：

#wrapper { height: 100%; }
#profile { 
  height: 100%; 
  border: 1px solid black; 
  display: grid; 
  grid-template-rows: 5fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center; /* 新增这行 */
}
#pfp { height: 85%; width: 85%; border: 1px solid black; margin: 1.5em auto 1.5em auto; }
.info { 
  border: 1px solid black; 
  font-weight: bold; 
  padding-left: 1em; 
  /* 可以去掉line-height: 100%; 不再需要 */
}

这个方法的优势：

• 完全保留fr单位的动态比例特性，窗口大小变化时布局比例丝毫不乱
• 一行代码搞定所有子元素的垂直居中，简洁高效

方案二：给单个.info元素用Flex布局（更灵活） #

如果你需要对某个特定的.info元素单独控制对齐方式，或者不想影响其他Grid子元素，也可以给.info类添加Flex布局：

.info { 
  border: 1px solid black; 
  font-weight: bold; 
  padding-left: 1em; 
  display: flex; /* 新增 */
  align-items: center; /* 新增 */
  height: 100%; /* 确保元素占满Grid行的高度 */
}

这样每个.info元素内部的文本会自动垂直居中，同时不影响Grid容器的整体布局比例。

为什么之前的方法不生效？ #

• 百分比line-height是基于字体大小计算的，不是容器的高度，所以当容器高度是动态的fr单位时，它根本没法匹配容器高度实现居中
• 固定值padding会破坏fr单位的动态比例，窗口大小变化时，文本的位置会偏离中心，不符合你要保持准确比例的需求

额外技巧：单独控制某一行的对齐 #

如果某个Grid行不需要居中（比如你的#imageFrame），可以给它单独设置align-self属性覆盖父容器的align-items：

#imageFrame {
  align-self: center; /* 或者start/end，根据需求调整 */
}

内容的提问来源于stack exchange，提问作者Philip Butler