上面兩個回答，答非所問啊，不覺得，呃。。。算了= =

這兩個例子vertical-align:middle的功勞。

第一個：表格垂直居中

看著什么垂直的樣式都沒設(shè)置，但仍然垂直居中了對吧？不過在chrome devtool里看看樣式就知道了。

而tr和td的vertical-align都是inherit，繼承了這個樣式。所以就垂直居中了。

第二個解釋比較復(fù)雜

原本before和after是基線對齊，但是設(shè)置height:100%并且將vertical-align設(shè)為middle后，其實已經(jīng)超出父元素的框了。但是父元素為了能包容它們，向下移動了基線（？），導(dǎo)致中線也下移，然后就讓child也垂直居中了。這個可能沒法理解，等會兒我畫個圖更新下答案吧。

更新

先看一個demo
我加了一個x看基線位置。
第一步中，僅設(shè)置了before屬性height:100%。x、before和child都是相對于基線對齊。
第二步中，給before設(shè)置了vertical-align：middle后，效果應(yīng)該是：

這時，before的middle線要與父元素的middle線，也就是x的交叉處對齊，但這導(dǎo)致它超過了父元素的上邊界。這時我覺得CSS或者是HTML有一個智能的地方就是為了包裹子元素，自動將父元素的middle線下移到合適位置。于是就變成了demo中的第二步。也就實現(xiàn)垂直居中了。

css3的flex布局就可以輕松解決問題

實例

我再補充下

• 第一個vertical-align:middle按規(guī)范定義是單元格高度的中線和其內(nèi)容中線對齊
• 第二個vertical-align:middle按規(guī)范定義就是他們的中線和父的基線加半x高度對齊，而規(guī)范中又沒定義父的基線在哪，看了 @白吟靈的回答 我猜是因為基線位置并不是固定的不好去定義。其實這里不用去管他，因為3個行內(nèi)盒在同一個行框內(nèi)參照物一樣，他們的中線必然是重疊，且前后的盒子高度又和外盒子一樣，就等于是主盒子中線和外盒子的中線對齊。

盒子的垂直居中有很多種，比如定位，transform，margin:0 auto;啥的都可以，文字的垂直居中 text-align: center;vertical-align: middle;line-height....;flex布局的兼容性暫時還不是很好，用的時候慎重