前兩天剛寫完如何水平居中一個元素，今天把垂直的情況補上。

　　相比於水平居中，垂直居中的情況就少多了。

　　1、行級元素的垂直居中

　　　　這種情況比較簡單，只需要設置line-height和height相等即可，也沒什麽可延伸的。

　　2、塊級元素的垂直居中

　　　　2.1、父元素高度不固定

　　　　其實我認為這種情況不用討論，正常情況下高度不固定，子元素會充滿父元素，不過非要使子元素距父元素有一定間距也不是沒辦法：

　　　　可以設置padding-top和padding-bottom相等來使子元素居中並且和父元素有一定距離。

　　　　2.2、父元素高度固定

　　　　css代碼

　　　　html代碼

　　　　針對這種情況，要實現垂直居中，只要以下兩點即可：

　　　　　　1）父元素line-height和height相等

　　　　　　2）子元素設置 vertical-align:middle;// 垂直居中對齊

　　　　　　　　　　　　 display:inline|inline-block 塊級元素轉行級元素

　　　　註意：這裏有個小細節需要註意，對於display：inline的情況，這兩條就可以實現，但是有個弊端就是我們沒辦法給子元素設置高度（因為這時已經變成行級元素了），

　　　　　　所以對於有子元素有高度要求的情況下，我們可以設置 display:inline-block ,但是大多數情況下這樣設置後我們會發現子元素的內容會發生偏移,如下圖：

　　　　　　這時什麽原因呢？

　　　　　　其實，這時子元素繼承了父元素的line-height屬性，使子元素內容發生了偏移。解決辦法也很簡單，只需要給子元素同樣設置一個新的line-height和height相等即可

如何垂直居中一個元素