如何在Grid单元格内垂直居中元素？.infor元素垂直居中失败求助

咱们先分析下为啥现有代码没实现垂直居中：

• .cardr 目前是普通块级元素，align-items: center 是flex/grid容器专属属性，对普通块级元素完全无效，所以你写的line a不起作用。
• align-self: center 需要父元素是flex或grid容器才能生效，而.cardr 不是，所以line b也没法让.infor 垂直居中。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：利用父容器的Grid布局直接对齐（最简洁） #

既然.card 本身就是Grid容器，咱们直接让Grid单元格内的内容垂直居中，再配合.cardr 的水平居中，一步到位：

.card{ 
  display:grid; 
  grid-template-columns: 54px auto; 
  align-items: center; /* 新增：让所有Grid项在单元格内垂直居中 */
} 
.cardr{ 
  text-align:center; 
  background:silver; 
} 
.infor{ 
  display:inline-block; 
  border:1px solid #555; 
  padding:4px 14px; 
  border-radius:11px; 
  background:gold; 
}

这个方案不需要修改.cardr 的显示类型，直接利用父容器的Grid特性，代码最简洁，也最符合你现有布局的逻辑。

方案二：把.cardr改成Flex容器（灵活度高） #

如果后续需要在.cardr 里添加更多元素，Flex布局会更灵活。修改.cardr 的CSS，让它成为Flex容器，同时控制水平和垂直对齐：

.cardr{ 
  text-align:center; 
  background:silver; 
  display: flex; /* 新增：转为Flex容器 */
  justify-content: center; /* 水平居中（替代text-align，也可以保留text-align） */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 让.cardr占满Grid单元格的高度，否则垂直居中效果不明显 */
} 
.infor{ 
  display:inline-block; 
  border:1px solid #555; 
  padding:4px 14px; 
  border-radius:11px; 
  background:gold; 
}

这里的height:100% 是关键，因为Grid布局中单元格的高度默认由内容决定，让.cardr 占满整个单元格高度后，Flex的垂直居中才能生效。

方案三：固定高度下用padding兜底（适合简单场景） #

如果左边.imgwrap 的高度固定是54px，且.infor 的高度也固定，你可以用上下padding实现垂直居中：

.cardr{ 
  text-align:center; 
  background:silver; 
  /* 假设.infor的高度是30px，计算上下padding：(54-30)/2 = 12px */
  padding: 12px 0; 
} 
.infor{ 
  display:inline-block; 
  border:1px solid #555; 
  padding:4px 14px; 
  border-radius:11px; 
  background:gold; 
}

这个方法的缺点是不够灵活，一旦元素高度变化就需要手动调整padding值，所以只推荐在固定布局场景下使用。

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