今天在写样式时，icon和文字都进行了垂直居中的处理，但是icon并没有垂直居中，后来发现由于 line-height 和 vertical 一起使用导致与预期样式不同，特此对 vertical-align 总结进行！vertical 支持很多属性：/* 关键字值 /vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/ <长度> 值 /vertical-align: 10em;vertical-align: 4px;/ <百分比> 值 /vertical-align: 10%;/ 全局值 */vertical-align: inherit;vertical-align: initial;vertical-align: unset;当 vertical-align 和 line-height 同时出现时出现样式差异是由于：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。1、现象Div内包裹一个img标签，给div添加背景发现div下部分多出一部分留白空间，这个现象就是由于vertical-align和line-height共同起作用的原因。对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！2、幽灵空白节点一个宽度为0, 表现如同普通字符的看不见的 “节点”。对于上面的问题，给文字添加一个白色背景，效果如下：Vertical-align默认的对齐方式为：baseline，也就是基线对齐。基线为文字的下边缘。所以图片与文字的下边缘对齐，文字的高度是由行高决定。解决方式1、让vertical-align失效图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等给img标签添加display:block样式，将img变为块级元素发现问题消失了。2、使用其他vertical-align值不用baseline，使用其他的属性值，比如：middle、top、bottomlign属性后空白节点消失。3、修改line-height的值下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。div { line-height: 5px; }4、line-height为相对单位，font-size间接控制Font-size可以间接改变line-height的值，也起到消除空白节点的作用。5、垂直居中当设置div { line-height: 240px; }img { vertical-align: middle; }此时的页面看似垂直居中，但是并没有完全垂直居中。middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。解决方案即：将空白节点也进行vertical-align:middle，但是直接操作不能实现，因此利用其他的方式,即 font-size:0div { line-height: 240px; font-size: 0; }img { vertical-align: middle; }此时的垂直居中也就是真正的垂直居中。这种通过line-height定高，元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器，连IE7浏览器也是支持的。6、一种很好的解决方式div { display:flex; align-items:center;}align-items 属性定义flex子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。