Vertically center minus sign on even font-size? - html

Question

Is there a way to vertically center a minus sign on even font sizes? I understand the problem, that on font-size: 16px; there is no "center" pixel, therefore the 1px high minus sign has to be in the upper or lower part. On font-size: 17px; there is a center, and it looks much better:
font-size: 16px;
font-size: 17px;
I know it's marginal, but for some users, this looks wrong.
Here is an example.

Answer 1

The problem isn't in centering, but in the middle font height (x-height), I think.
<P style="font-family: arial; font-size: 17px;">ABC-DEF</P>
<P style="font-family: times; font-size: 17px;">ABC-DEF</P>
<P style="font-family: georgia; font-size: 17px;">ABC-DEF</P>
<P style="font-family: cambria; font-size: 17px;">ABC-DEF</P>
<P style="font-family: opensans; font-size: 17px;">ABC-DEF</P>
<P style="font-family: tahoma; font-size: 17px;">ABC-DEF</P>
<P style="font-family: verdana; font-size: 17px;">ABC-DEF</P>
In the code above you can see that font with small x-height (times) has a minus under the vertical center, in tahoma/verdana it's centered better.

Answer 2

Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!
This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(I haven't tried for other elements like span or div but I believe it works the same, if not pardon my guess) upon increasing the font-size(to any extent) regardless of font-family used.
Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.
Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)
/* common style */
button {
height: 50px;
width: 200px;
background: #216AFF;
color: white;
}
.minus {
font-size: 70px;
display: flex;
justify-content: center;
line-height: 35px;
}
.plus {
font-size: 50px;
display: flex;
justify-content: center;
line-height: 45px;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>