如何理解line-height与vertical-align
大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网css任务5，深度思考中的知识点——如何理解line-height与vertical-align？
一.背景介绍
我们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器， 利用css来实现对象的垂直居中和水平居中有许多不同的方法，今天我分享的line-height和vertical-align就是实现垂直居中常见的用法.
二.知识剖析
1.line-height的基本概念
定义：行高是指文本行基线baseline之间的垂直距离
行高是可以被继承的，数字可以直接被继承，然后在计算行高；而百分比是先计算出行高，在以px继承
行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。
2.vertical-align基本概念与应用
定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐
注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。
3.常见问题
图像元素在块级元素底部为什么留有空白？
原因是行内元素默认都受vertical-align（垂直对齐方式）和line-height（行高）的影响， 而vertical-align默认的对齐方式是baseline,即基线对齐。 这个基线就是span标签里的字母X的下边沿，故图片底部是与字母底部相对齐的（不是与span标签的背景对齐）。 又因为字母本身有line-height（行高）值，所以span标签加上背景后比字母要高一些。
4.解决方案
解决方法：（四种方法任意一种都可解决该问题）
（1）、将整个p内的font-size设置为0；
（2）、将图片img变为块级元素，即设置其为display:block;
（3）、给p设置一个行高（值尽量小些），设置为line-height:5px;
（4）、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以（为了覆盖默认的值baseline）;
5.编码实战
6.拓展思考
还有哪些方法可以实现垂直居中？
1.单行文字垂直居中使用line-height属性
2.使用table-cell布局
display: table-cell;
vertical-align: middle;
text-align: center;
3.使用flex弹性布局
display: flex;
justify-content:center;
align-items:center;
4.绝对定位和负边距
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
5.使用transform
.box4 {
position: relative;
}
.box4 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
7.参考文献
深入理解line-height与vertical-align
8.更多讨论
有没有其他方法实现垂直居中
line-height与vertical-align？_腾讯视频
