针对inline-block元素的垂直居中
inline-block元素的水平居中和inline元素的垂直居中实现是不一样的。
对于inline元素（比如span）只需要满足元素的line-height等于容器的height值就可以了。但是对于inline-block元素你会发现这招不管用了。
尤其是单个inline-block的情况下经常是line-height和height即使veritical-align:middle也是没有效果的。
到底什么是inline-block元素你能讲清楚吗？
https://developer.mozilla.org/en-US/docs/Web/CSS/display
解释
一个很重要的原因就是元素的基线不是固定的，是可变的。
不理解的话
虽然vertical-align属性只会在inline-block水平的元素上期作用，
但是其影响到的元素涉及到inline属性的元素，
这里千万记住，inline水平元素受vertical-align属性而位置改变等
不是因为其对vertical-align属性敏感或起作用，
而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。
一个line box的高度是的计算方式如下：
line box中的每一个行内元素都将加入到计算过程，如果是元素inline
的则取其line-height
的值，如果元素是inline-block
或者是inline-table
则取其margin-box的高度，最后这些值的最大值，即为line box的高度了。
对于有正文的行内元素而言，它的基线正如上面的栗子中所展示的那样.
那么对于没有正文的行内元素（这里指的是有大小的inline-block元素但没有正文或者类似与img, video
这样的replaced element），它们的基线位于它们margin box的底部。
