How does line-height vertically center text?

Question

I\'m trying to understand why the line-height CSS property places the text vertically in the middle of this button:

Answer 1

Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.

If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.

Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.