如何实现Angular Material卡片内文本的垂直居中？

嘿，我来帮你搞定这个垂直居中的问题！你已经成功实现了水平居中，只差一步就能让文本在卡片里完美垂直居中啦～

问题分析 #

你当前的CSS里，给卡片内的div用了align-content: center，但这个属性是用来控制多行flex项目之间的垂直间距的，而你的情况里div内只有一行文本，所以这个属性起不到垂直居中的作用。我们需要换成align-items: center，它才是用来让单行flex项目在垂直方向上居中的属性。

修改后的代码 #

HTML（保持不变）

<mat-card class="card-initials"> <div> BD </div> </mat-card>

CSS（修改关键属性）

.card-initials{ 
  width: 200px; 
  height: 200px; 
  float: right; 
  margin: 15px; 
}
.card-initials div{ 
  width: inherit; 
  height: inherit; 
  display: flex; 
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（替换原来的align-content） */
}

原理说明 #

• display: flex把div变成flex容器，里面的文本会成为flex项目
• justify-content: center控制flex项目在水平方向上的居中
• align-items: center控制flex项目在垂直方向上的居中

这样修改后，“BD”文本就能在200x200的卡片里同时实现水平和垂直居中啦！

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