一直以来就知道line-height可以上下居中文字，也曾查过很多资料，什么字体基线那些玩意，太复杂！
下面是一个通俗易懂的理解方式：

line-height呢，你可以理解为每行文字所占的高度。
比如说，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。
显然，每个字的大小只有20px，那怎么边呢？于是呢，浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。
这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。
这样的话，如果你的DIV是50px，那么巧了，正好这行文字也就相对于DIV居中了。
所以，这样一来呢，就有了“把line-height设置为容器div的高度就能使文字垂直居中”。