資訊專欄INFORMATION COLUMN
摘要：方法二利用，設置元素結構，并應用實現垂直居中，這種方法的實現可用于多行文本，要求及以上版本。
讓元素居中對齊是非常常見的需求，首先是水平居中，要實現水平居中行內元素只需要在其父元素上設置text-align: center即可，對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發現了vertical-align，感覺就是它了，設置個vertical-align: middle，怎么沒有達到預期效果？下面來詳細介紹下vertical-align這個屬性以及實現垂直居中的若干方法。
vertical-align屬性是干什么的根據W3C Spec中對vertical-align屬性的定義：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
什么是line box？同樣來自W3C Spec
The rectangular area that contains the boxes that form a line is called a line box.
這個屬性僅影響了單行中行內元素的垂直位置，那么我們會涉及到的元素應該是這樣的：
inline
inline-block
既然我們要垂直居中，垂直居中是相對于垂直高度而言的，然而我們知道height對inline元素無效，那么line box的高度是怎么計算的呢？（還是引用W3C Spec）
The height of a line box is determined by the rules given in the section on line height calculations.
一個line box的高度是的計算方式如下：line box中的每一個行內元素都將加入到計算過程，如果是元素inline的則取其line-height的值，如果元素是inline-block或者是inline-table則取其margin-box的高度，最后這些值的最大值，即為line box的高度了。
好了，然后來看看vertical-align屬性可以取哪些值：
| 可取值 | 說明 |
|---|---|
| baseline | 將元素的基線與父元素的基線對齊 |
| middle | 將元素的中線與父元素的基線加上x一半的高度對齊 |
| sub | 將元素置于基線下方合適的位置 |
| super | 將元素置于基線上方合適的位置 |
| text-top | 將元素的頂部與父元素正文區域的頂部對齊 |
| text-bottom | 將元素的底部與父元素的正文區域的底部對齊 |
| top | 將元素的頂部與line box頂部對齊 |
| bottom | 將元素的底部與line box底部對齊 |
| < percentage > | 基于基線上（正值）下（負值）移動元素，值通過百分比乘上行高而得 |
| < length > | 基于基線上（正值）下（負值）移動元素 |
這里有兩個概念：基線（baseline）和正文區域（content area）。
先來感受下，舉個栗子：
http://jsfiddle.net/leozdgao/y4oexshn/6/embedded/result,html,css/
在第一個栗子中，直觀地展示了vertical-align屬性所有可取屬性的表現。
在第二個栗子中，藍色的線表示的就是基線（記得小時候英語練習本每行的第三根線么），綠色的輪廓表示的就是正文區域，這里故意加了個較大的行高，于是紅色的輪廓表示的就是line box的輪廓了。
對于有正文的行內元素而言，它的基線正如上面的栗子中所展示的那樣，那么對于沒有正文的行內元素（這里指的是有大小的inline-block元素但沒有正文或者類似與img video這樣的replaced element），它們的基線位于它們margin box的底部。
我們發現在這些可取的值中，大部分都與它們的父元素（通常為line box）的基線有關，那么line box的基線在哪里？或者栗子里的藍線是根據什么畫出來的？在W3C Spec中是這樣說的：
CSS 2.1 does not define the position of the line box"s baseline
是的，沒有定義......不過好在瀏覽器之間的實現似乎沒有什么區別，取的就是正常的一個文本的基線位置，這里就不再多糾結line box的基線是怎么計算的了。
這里額外說明下vertical-align: middle，根據上面的解釋，什么是父元素的基線加上x一半的高度？還是來看個直觀的栗子：
http://jsfiddle.net/leozdgao/hf3ocgd8/2/embedded/result,html,css/
藍色的線依然表示基線，橙色的線表示的就是所謂的line box的基線加上x一半高度的位置。同時也展示了為什么僅給元素設置vertical-align: middle是沒有辦法達到效果的。
不過line box的基線并不是固定不動的，這次用一個實際的栗子來解釋，比如在單行中有一張圖片和一段文本，我們的需求是讓文字垂直居中對齊：（我用一個inline-block的方塊來模擬一張圖片）
http://jsfiddle.net/leozdgao/pe8t1LLf/1/embedded/result,html,css/
第一個case是沒有設置vertical-align時的樣子，我們現在知道將文字部分設置vertical-align: middle是不正確的。在第二個case展示了在圖片上應用vertical-align: middle，我們發現，為了滿足圖片中線與line box基線加上半個x高度的位置對齊，而圖片位置不能移動了（整個line box就是它撐起來的），所以line box的基線被調整了。那么現在看上去好像是居中了？其實還是差一點，如case3中那樣，這時將vertical-align: middle應用與文本上，就可以垂直居中了。
由此我們得到的結論是：對于那些直接影響著line box高度的行內元素來說，vertical-align對元素本身可能無影響，但會調整line box的基線。
垂直居中的若干種方法垂直居中的需求往往并不限于單行文本，可能會設計多行文本，或者多行文本配圖片等等，下面整理的各種垂直居中的方案，并試著分析其優劣。
方法一：
將line-height設置為和height一樣高，常用于導航欄或者標簽頁這樣的單行文本居中，缺點是這種方法只能用于單行文本，如果還涉及到圖片，可以根據上面一部分中提到的方法調整。
http://jsfiddle.net/leozdgao/150et323/embedded/result,html,css/
方法二：
利用css table，設置元素table結構，并應用vertical-align: middle實現垂直居中，這種方法的實現可用于多行文本，要求IE8及以上版本。
http://jsfiddle.net/leozdgao/00dgdbem/embedded/result,html,css/
?方法三：
上下設置等高的padding或者margin值，個人覺得最笨的一種方法，唯一的優點是兼容所有瀏覽器，缺點是很不靈活，大小需要額外計算并寫死。（不提供栗子）
方法四：
絕對定位，這種方法并不僅限于『居中』，一種是利用負的margin值來實現，另一種是用CSS3的translate來實現，優點的話同樣是可以支持多行文本，只是負的margin會寫死大小，僅適合與大小固定的元素，用translate要考慮css3的瀏覽器兼容問題，最大的局限性是絕對定位本身導致元素脫離文本流normal flow，多數情況下其父元素僅包括它一個子元素時會使用。
http://jsfiddle.net/leozdgao/h34zqLf2/1/embedded/result,html,css/
補充：支持CSS3的瀏覽器，也可以使用calc，像這樣使用：
csstop: calc(50% - (300px / 2));
方法五：
同樣是絕對定位，這個方法一般被稱為Stretching，把4個定位方向全部設置為0，這種方式不會將大小寫死，瀏覽器兼容性也很不錯，但絕對定位的弊端上面也已經提到過了。
http://jsfiddle.net/leozdgao/5a9z676h/1/embedded/result,html,css/
這里簡單解釋下實現原理：我們發現了margin: auto，是的，我們給4個方向全部設置為0，即為元素提供了與其父元素相同的外邊緣。接下來看W3C Spec中提到的：
If none of the three are "auto": If both "margin-top" and "margin-bottom" are "auto", solve the equation under the extra constraint that the two margins get equal values.
這是就垂直方向而言的：其中的three指的是top height bottom，就是margin值的計算結果會讓元素盡可能居中。水平方向同理。
方法六：
隱藏一個浮動元素，這個浮動元素占父元素一半的高度，然后需要垂直居中的元素設置清除浮動，并設置大小為其高度一半的負margin-top，這個方法兼容任何瀏覽器，但總感覺有點hack的意味，不推薦。
http://jsfiddle.net/leozdgao/zoft69ao/1/embedded/result,html,css/
方法七：
FlexBox布局，瀏覽器需要支持，在移動端可大肆使用。
http://jsfiddle.net/leozdgao/4my89br7/1/embedded/result,html,css/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/111071.html
摘要：垂直居中當設置此時的頁面看似垂直居中，但是并沒有完全垂直居中。中線位置字符的中心并不是字符內容的絕對居中位置。這種通過定高，元素垂直居中的方法不僅適用于現代瀏覽器，連瀏覽器也是支持的。 今天在寫樣式時，icon和文字都進行了垂直居中的處理，但是icon并沒有垂直居中，后來發現由于 line-height 和 vertical 一起使用導致與預期樣式不同，特此對 vertical-ali...
摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。 在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...
摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。 在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...
摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個門 先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？我們都知道設置父div的line-height 等于它的height就可以了，像下面...
摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。 請一定看到最后，flex太令人驚喜！ ヾ(o???)? 入個門 先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？我們都知道設置父div的line-height 等于它的height就可以了，像下面...
閱讀 3870·2023-04-26 02:10
閱讀 1637·2021-11-22 15:25
閱讀 1892·2021-09-22 10:02
閱讀 1150·2021-09-06 15:02
閱讀 3726·2019-08-30 15:55
閱讀 796·2019-08-30 13:58
閱讀 2999·2019-08-30 12:53
閱讀 3311·2019-08-29 12:38
