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

it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.

Note there is a default value of line-height property.