                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

height和line-height分别是什么的高度？该方法实现垂直居中的原理是什么？求详解

height和line-height分别是什么的高度？该方法实现垂直居中的原理是什么？

求详解，两个问题，两个问题，两个问题。

Python程序猿

2016-04-09

源自：初识HTML(5)+CSS(3)-升级版 15-8

关注问题我要回答

1011

操作

收起

4 回答

蜡笔Star 回答被采纳 +3 积分
2016-04-09

height是整个div区块的高度，而line-height是规定文字的行高的。前者div里的文字会默认从顶端开始向下排列，而后者定义的文字会与上一个div保持一定的距离，从而实现“垂直居中”（height与line-height的值需要设置为同一个像素值才会实现文字垂直居中）

4 回复有任何疑惑可以回复我~

收起回答

Python程序猿提问者

非常感谢！

2016-04-09 回复有任何疑惑可以回复我~

慕斯卡0503862

一直不太理解的就是，height（div的高度）和line-height（行间距）设置相同的值，那字的高度不用算进去的么？

2016-06-13 回复有任何疑惑可以回复我~

error昵称已占用

为什么height与line height相等就居中了？那样的话按理说字不就超出了div的范围了嘛

2016-09-15 回复有任何疑惑可以回复我~

慕数据6098505
2018-08-07

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