'Center large text vertically in flexbox with align-self: center [duplicate]

I'm trying to center the number 42 vertically inside its parent div. The parent div has display: flex (which I need for other reasons). When I set align-self: center on the number, the center of the text is above the center of the div.

I'm guessing this is because it's centering the text as if it had descenders, but in this case I'm only rendering a number so there will never be a descender. The same issue would happen if the text were all uppercase.

How can I make this number appear vertically centered?

.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>

Update

Based on this answer, I found that adding padding-top: 0.3em to the .child div worked well:

.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>

As the linked answer mentions, the advantage of using em is that you don't have to adjust the value when you change the font size.

Another very important thing I did was use a font a CDN like Google Fonts so that I would get consistent rendering across browsers and platforms.

cssflexboxalignmentvertical-alignment


Solution 1:[1]

You are trying to apply the property to the child div but applying display:flex to the parent. Try adding align-items: center; to the container for making it center for vertical and justify-content: center; to align it in center horizontally.

.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>

Solution 2:[2]

Does this solve your issue?

.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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muhammad Umer Naeem
Solution 2

Related Questions