Question

CSS为什么行高line-height与文字高度height设为一样大,文字就垂直居中了?

Answer 1

不知道你为什么要重新开个提问。
"行高line-height与文字高度height设为一样大，文字就垂直居中了"只是一种效果上的表现。
这个效果跟对象的基线有关系，所以，当两者值一致的时候，并不见得会出现垂直居中的效果。
字体的基线是与行高的中线所处的位置一致的，当某种字体的基线在字高的中间时，文字也就处在行高设定值的中间位置，而此时的行高如果设定的值与高度一致时，看上去就垂直居中了。

Answer 2

用p元素输出一行文本后：
①line-height(行高)=font-size(字符大小)+word-spasing(上下行间距)
例如：行高设置为100px时，若字符大小为30px，那上下行间距就分别为35px；
重点是：字符上行间距和下行间距的大小是相同的。
②如果你知道height是块级元素的属性，没行内元素什么事，那你对你的问题就不难理解：
试想，一个100px高的div，它的上下padding都设置为35px；中间的content就是30px，此时，它的height(高)=content(内容大小)+padding(上下填充值)。
③结合以①②中的两个等式：当设置line-height等于height时，字符大小就是内容大小，而上下相同的行间距就相当于上下相同的padding。故，div中的内容居中=p元素的字符(撑满容器)居中。
“如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？”
你想想，你说的“垂直居中”是相对什么居中？相对于上一行的文本和下一行的文本垂直居中？确实是这样，但这不是相对包围他们的容器。

Answer 3

line-height行高是包含了文字的高度在内的，而height并非是文字的高度，而是文字所在标签的高度
行高举例的话，假如行高设为30px，那么就是文字中心点距上或者距下各为15px，所以行高与标签的高度一样的时候就垂直居中了

Answer 4

这是在文字只有一行的时候垂直居中的办法行高与文字容器同高，此时在效果上看就是垂直居中。多行文字需要用相对定位。

Answer 5

line-height是行高
height是容器高
块级容器里只有一行的情况下
line-height
等于
height
就是文字垂直居中