- 支持的属性值：inherit（继承），以及以下几类
若为固定数值，则是在原有基础上进行偏移；若为百分比，则是在行高line-height基础上进行计算
vertical-align作用的前提：1、只能作用于inline水平，如inline、inline-block；2、table-cell元素。ps:如果line-height太短，则不够居中，这就是为什么有些图片居中失效了
table-cell的vertical-align:middle是作用于自身，而不是作用于子元素。
以下可以实现图片居中：
<p><img src=''></p>
p{display:table-cell;vertical-align:middle}
以下不能实现图片居中：
<p><img src=''></p>
p{display:table-cell;}
img{vertical-align:middle}inline-block的基线，是正常流中最后一个Line box的基线，除非这个line box里面既没有line boxes 或者本身'overflow'属性的计算值而不是'visible'，这种情况下基线是margin底边缘
- top/bottom：与元素的顶部、底部对齐（line box）
middle
inline/inline-block元素：元素的垂直中心点和父元素基线上1/2x-height处对其。由于文字有下沉特性，所以字体越大，表现出来的效果越不居中（font-size:0时为完全居中）
table-cell元素：单元格填充盒子相对于外面的表格行居中对其。td单元格不足，高度会用padding填充（使用js获取padding依然为0）vertical-align:text-top/text-bottom
盒子顶部和父级content area的顶部（底部）对齐。（content area受字体、字号影响），因此有以下两个结论：
1、元素vertical-align垂直对齐的位置与前后元素都没有关系。
2、元素vertical-align垂直对齐的位置与行高line-height没有关系，只于字体大小有关。
实际应用（表情）：
上标和下标
vertical-align:super 提高盒子的基线到父级合适的上标基线位置。
vertical-align:sub 同上，相反相邻元素前后vertical-align不一致：垂直居中最佳写法，增加一个匿名的内联元素
关注当前元素和父级，前后并没有直接影响。
解决IE7以下兼容性问题：将文字display:inline-block
最佳实践：
1、图标文字对齐。以下方式可以兼容各种浏览器
2、不定尺寸图片或多行文字的垂直居中：
①主体元素inline-block化；
②添加0宽度100%高度辅助元素
③vertical-align:middle
