Vertical-align: center details adjustment of middle

UseVertical-align: MiddleRow-level elements can be vertically centered, but the center is calculated based on the text midline, and the text midline is different in different fonts, even different fonts are displayed in different browsers. So directly useVertical-align: MiddleIt is difficult to center perfectly, so other adjustments are needed.
Run <! Doctype HTML>
<Style>
Div {
Border: 1px solid red;
Width: 200px;
Height: 100px;
Line-Height: 100px;
Text-align: center;
}
SPAN {vertical-align: middle ;}
# Box {
Display: inline-block;
Width: 100px;
Height: 98px;
Background: # Eee;
}
</Style>
<Div>
ABC <span id = "box"> </span> def
</Div>
When the container existsVertical-align: MiddleElement, their midline is directed to the baseline of the row. The baseline of the row may not be the midline, and the deviation between the baseline and the midline isVertical-align: MiddleThe deviation between the vertical center and the vertical center.
The font, Font, and font size of the baseline and midline are different. In addition, there are still differences in font rendering in different browsers, so that it is not easy to calculate the specific deviation. However, we can cancel the baseline and Neutral Line location. The font size is changed to 0, that is, the text node is directly used in the line.
Run <! Doctype HTML>
<Style>
Div {
Border: 1px solid red;
Width: 200px;
Height: 100px;
Line-Height: 100px;
Text-align: center;
Font-size: 0px;
}
SPAN {
Vertical-align: middle;
Display: inline-block;
Font-size: 1rem;
}
# Box {
Width: 100px;
Height: 98px;
Background: # Eee;
}
</Style>
<Div>
<Span> ABC </span> <span id = "box"> </span> <span> def </span>
</Div>