vertical-align 這個屬性就是設(shè)置垂直對齊的方式的, 具體可參考這里

首先
解答樓主最關(guān)系的問題：「如何確定父元素盒子的 baseline？」
參考答案：元素的 baseline 就是元素內(nèi)部 x 字母的底端。點我了解更多

其次
樓主的問題沒有描述不嚴(yán)謹(jǐn)。
并不是加了一個「空」的 i 標(biāo)簽，而是加了一個「高度為 100%」的 i 標(biāo)簽 。
「這個 100% 很重要啊，不信的話，把 100% 去掉看看，???」

再其次
簡單解釋一下「vertical-align：middle」的意思：
元素中垂線與父元素的基線加上小寫字母 x 一半的高度值對齊。

所以在本例子中，
如果去掉 <i> 標(biāo)簽，
這個時候 <span> 設(shè)置了 vertical-align：middle; ，所以會和 xxxxxx 垂直對齊。
不過父元素 <div> 設(shè)置了高度「100px」，
理所當(dāng)然，<span> 和 xxxxxx 不會在 div 100 像素的「垂直中間」?。。?！

這個時候，樓主加入一個 「高度 100% 的 <i> 標(biāo)簽」，???，并且也設(shè)置了 vertical-align：middle;，
那么這個時候，
<i> 標(biāo)簽也會和 xxxxxx 垂直對齊，
不過 <i>「比較倔強」，它竟然和父元素一樣高「100% == 100px」
由于 <i> 也設(shè)置了 vertical-align：middle;，
所以，xxxxxx 就會「向下移動」保持和 <i> 垂直對齊，
這個時候，<span> 看到 xxxxxx 向下移動了，
所以 <span> 也要跟著向下移動，
這個時候「皆大歡喜」===> 「三個元素都垂直居中了，呃呃呃」

所以并不是加入了 <i> 使得他們才能居中，而是這個 <i> 有 100 像素的高度好么。

「了解原理，代碼就簡單，且迎刃而解」

i里的vertical-align: middle: i元素中垂線與父元素div里的x的中間對齊。
相對的來看，也可以看成父元素的x中間和i元素中垂線對齊~

父元素的baseline就是你例子里面xxxxxx的底部，i設(shè)置的vertical-align: middle也是根據(jù)這個來對齊的。 參考鏈接1：http://www.jianshu.com/p/6f9d...。參考鏈接2：http://www.jianshu.com/p/6f9d...

簡單來說就是vertical-align針對inline-block的元素才生效