本文版權(quán)歸鄭哲明和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源
這里記錄我在學(xué)習(xí)前端過(guò)程中所遇到的困惑及自己的解答。
1、使用display:table-cell垂直居中為什么需要上級(jí)元素display:table？
display：table和display：table-call的元素寬度都會(huì)收縮（即內(nèi)容必要寬度）；父元素display：table，同時(shí)子元素display：table-cell，子元素會(huì)撐滿父容器，此時(shí)對(duì)子元素使用vertical-align，垂直居中會(huì)起作用。
這其中的關(guān)鍵是 display：table-cell元素的高度要寫死（百分比不起作用），此時(shí)垂直居中有效，display：table倒并不是必要條件。
2、為什么display：table-cell的元素脫離普通流后，vertical-align：middle無(wú)效？
暫時(shí)不清楚。
3、為什么display：table-cell的元素使用margin無(wú)效？
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
除了 display 為 table 的屬性不支援外，適用所有元素（包含 table-caption, table, inline-table ）。
-
為什么img的下方有空隙？如下圖
不僅僅是img有，本質(zhì)原因是這兩個(gè)屬性的影響：display:inilne-block或display：inline、vertical-align：baseline。
默認(rèn)圖片的基線在圖片底端，當(dāng)有vertical-align：baseline時(shí)，元素基線即與line box 基線對(duì)齊，baseline的下方給字母留出一點(diǎn)空間，即形成空隙。解決方案就是改變line box 的baseline的位置。
注意圖片的vertical特性：圖片撐開(kāi)了line box的高度，line box的基線將隨圖片變動(dòng)。
參考：
vertical-align:You need to konw
