Question

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

Answer 1

用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 2

line-height行高是包含了文字的高度在内的，而height并非是文字的高度，而是文字所在标签的高度

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

追问

如果此时我把行高调为60px，那么文字中心点距上或者距下各为30px，那不仍然是垂直居中吗？

追答

如果超出标签的高度的话，会以居上的距离为准，那就会偏下
补充：table布局的话，td如果设定了高度，那么文字就会默认垂直居中，这个你可以好好利用

Answer 3

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

Answer 4

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