針對(duì)inline-block元素的垂直居中
inline-block元素的水平居中和inline元素的垂直居中實(shí)現(xiàn)是不一樣的。
對(duì)于inline元素（比如span）只需要滿足元素的line-height等于容器的height值就可以了。但是對(duì)于inline-block元素你會(huì)發(fā)現(xiàn)這招不管用了。
尤其是單個(gè)inline-block的情況下經(jīng)常是line-height和height即使veritical-align:middle也是沒有效果的可款。
到底什么是inline-block元素你能講清楚嗎焚碌？
https://developer.mozilla.org/en-US/docs/Web/CSS/display
解釋
一個(gè)很重要的原因就是元素的基線不是固定的，是可變的碍侦。
不理解的話
雖然vertical-align屬性只會(huì)在inline-block水平的元素上期作用，
但是其影響到的元素涉及到inline屬性的元素隶糕，
這里千萬記住瓷产，inline水平元素受vertical-align屬性而位置改變等
不是因?yàn)槠鋵?duì)vertical-align屬性敏感或起作用，
而是受制于整個(gè)line box的變化而不得不變化的枚驻，這個(gè)后面會(huì)較為深入的分析濒旦。
一個(gè)line box的高度是的計(jì)算方式如下：
line box中的每一個(gè)行內(nèi)元素都將加入到計(jì)算過程，如果是元素inline
的則取其line-height
的值再登，如果元素是inline-block
或者是inline-table
則取其margin-box的高度尔邓，最后這些值的最大值，即為line box的高度了锉矢。
對(duì)于有正文的行內(nèi)元素而言梯嗽，它的基線正如上面的栗子中所展示的那樣.
那么對(duì)于沒有正文的行內(nèi)元素（這里指的是有大小的inline-block元素但沒有正文或者類似與img, video
這樣的replaced element），它們的基線位于它們margin box的底部沽损。
