使用 align-self: center 在 flexbox 中垂直居中大文本 [重复]

Question

我正在尝试将数字 42 在其父 div 中垂直居中。父 div 有 display: flex （我需要它的其他原因）。当我在数字上设置align-self: center时，文本的中心在div的中心上方。

我猜这是因为它使文本居中，就好像它有descenders，但在这种情况下，我只呈现一个数字，所以永远不会有下降。如果文本全部为大写，也会出现同样的问题。

如何使这个数字垂直居中显示？

.container {
  height: 4.5cm;
  display: flex;
  background-color: #c2fcb6;
}
.child {
  font-size: 96pt;
  align-self: center;
}

<div class="container">
  <div class="child">42</div>
</div>

更新

基于this answer，我发现将padding-top: 0.3em 添加到.child div 效果很好：

.container {
  height: 4.5cm;
  display: flex;
  background-color: #c2fcb6;
}
.child {
  font-size: 96pt;
  align-self: center;
  padding-top: 0.3em;
}

<div class="container">
  <div class="child">42</div>
</div>

正如链接的答案所提到的，使用 em 的好处是您在更改字体大小时不必调整值。

我做的另一件非常重要的事情是使用像 Google Fonts 这样的 CDN 字体，以便在浏览器和平台之间获得一致的渲染。

Answer 1

您正在尝试将该属性应用于子 div，但将display:flex 应用于父级。尝试在容器中添加align-items: center; 使其垂直居中，justify-content: center; 使其水平居中对齐。

.container {
  height: 4.5cm;
  display: flex;
  background-color: #c2fcb6;
  align-items: center;
  justify-content: center;
}
.child {
  font-size: 96pt;
}


 <div class="container">
      <div class="child">42</div>
    </div>

Answer 2

这能解决您的问题吗？

.container {
  height: 4.5cm;
  display:flex;
  background-color: #c2fcb6;
  width:100%;
  flex-direction:column;
  justify-content:center;
  
  
}
.child {
  font-size: 96pt;
  
  align-self:center;
  
  
}

<div class="container">
  <div class="child">42</div>
</div>