這兩個(gè)垂直居中是怎么實(shí)現(xiàn)的

上面兩個(gè)回答，答非所問(wèn)啊，不覺(jué)得，呃。。。算了= =

這兩個(gè)例子vertical-align:middle的功勞。

第一個(gè)：表格垂直居中

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

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

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

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

更新

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

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

css3的flex布局就可以輕松解決問(wèn)題

實(shí)例

我再補(bǔ)充下

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

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