How to vertically align text in a browser-independent way? - css

Question

Context:
I'm trying to use CSS to display playing cards for a game I'm designing on my free time
What I'm trying to do, specifically:
Nothing revolutionary, there's a place on my cards in which I need to write some text, and I want to center the text so that it looks good
What I did:
The relevant part of the HTML is simply this:
<div class = "card_header">
<div class = "card_cost">1</div>
</div>
And the relevant CSS:
.card_header {
position: relative;
top: 110px;
box-sizing: border-box;
width: 100%;
height: 75px;
}
.card_cost {
position: absolute;
top: 50%;
right: 165px;
transform: translateY(-50%);
font-size: 60px;
font-weight: bold;
}
What's the problem:
I expected the card_cost text to be vertically centered between the top and bottom borders of the card_header, but under the browser I was using (Firefox), the text was a bit too high. I tried to fix this by using top: calc(50% + 4px);, which looks like this (a bit better):
Since it felt a bit too tweaky for my taste, I went and checked how it looked like under another browser (Safari) to see whether it looked the same, and it looks like this:
which is the opposite problem: the text is too low.
I've tried adding border: 1px dotted gray; to get a better idea of what's happening, and here's what I see (safari on the left, firefox on the right):
The text seems to be vertically centered within card_cost in Safari (which means it would probably get centered properly if I simply used top: 50%; as I originally did), but in Firefox the box seems to be bigger and text way-high within the box.
What exactly is going on here? Why is this behaving differently depending on the browser? Is there a way to make this render the same? Or, more broadly, is there any browser-independent way for me to make the text vertically centered here?
Edit:
Since someone mentioned line-height in the comments, here's what it looks like when I add line-height: 1; for card_cost (again, Safari on the left and Firefox on the right):
With this, the text doesn't seem as centered as before under Safari, and it's even more clear that the text is way-high under Firefox

Answer 1

I usually take approach with invincible :before on parent with 100% of height and vertical-align: middle;. That way this :before justifies other inline-block content:
// I would apply this style everywhere
.card_header,
.card_header * {
font-family: arial;
box-sizing: border-box;
}
.card_header {
position: relative;
top: 110px;
width: 100%;
height: 75px;
text-align: center;
background-color: rgba(100, 0, 0, .1);
}
.card_header:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
border-left: 1px solid blue;
}
.card_cost {
display: inline-block;
font-size: 60px;
height: 60px;
font-weight: bold;
vertical-align: middle;
background-color: rgba(0, 0, 100, .1);
}
<div class="card_header">
<div class="card_cost">1</div>
</div>