如何在CSS嵌套网格中实现文本垂直居中或底部对齐？

嘿，针对你遇到的嵌套网格文本对齐问题，这里有几个简单直接的解决方案，结合你的代码调整就能实现效果：

方法1：利用Grid容器的align-items属性 #

你可以直接给.nested这个网格容器设置交叉轴对齐规则，让它的所有子元素（带红色边框的div）统一对齐：

文本垂直居中对齐 #

修改.nested的CSS代码：

.nested { 
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* 控制子元素垂直居中 */
  height: 100%; /* 让嵌套网格撑满父元素高度，否则对齐效果不明显 */
}

你的.item1和.item2都设置了固定高度，给.nested加上height:100%后，align-items:center才能让子元素在整个父容器高度范围内实现垂直居中。

文本底部对齐 #

如果要把文本对齐到网格元素底部，只需把align-items的值改成end：

.nested { 
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
  align-items: end; /* 控制子元素垂直底部对齐 */
  height: 100%;
}

方法2：给单个网格子项设置align-self #

如果你不需要所有子元素统一对齐，只想调整某几个的位置，可以给单个.nested > div设置align-self属性：

.nested > div { 
  border: 1px solid red;
  align-self: center; /* 单个元素垂直居中，可选值还有end（底部）、start（默认顶部） */
}
.nested {
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

方法3：结合Flex布局精细控制文本 #

另一种思路是把每个网格子项设为Flex容器，这样能更灵活地控制内部文本的位置：

文本垂直+水平双居中 #

.nested > div { 
  border: 1px solid red;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
  height: 100%;
}
.nested {
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

文本底部对齐 #

.nested > div { 
  border: 1px solid red;
  display: flex;
  align-items: flex-end; /* 垂直底部对齐 */
  height: 100%;
}
.nested {
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

关键注意点 #

• 必须给.nested设置height:100%，否则它只会包裹文本内容的高度，对齐效果无法在父元素的整个高度范围内体现。
• 如果需要差异化对齐，align-self比容器级的align-items灵活性更高，能单独控制某一个子项的位置。

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