最經常使用的css垂直居中方法

引言

　　css垂直居中一直以來都是一個被你們說爛了的話題，翻來覆去的炒。不過說實話，正是由於css沒有提供標準的垂直居中方法（不過在css3中已經有了相關規範），因此你們纔會對它進行專門的研究。這研究來研究去，垂直居中的方法比水平居中都要多了。但又說回來，各類方法人云亦云，不一樣的方法對於不一樣層次的人理解起來又有不一樣，用處也不一樣。本文結合技術實現的複雜度、理解性的難易度、以及大多數人的接觸順序對經常使用的垂直居中方法進行分等級的系統講解，但願能對讀者的工做和學習有所幫助。

　　OK，閒話扯了一堆，下面開始正文，先來一個你們最早接觸到的。

Level 1：絕對定位

　　兼容性：

Firefox	Chrome	Internet Explorer	Opera	Safari
(Yes)	(Yes)	IE8+	(Yes)	(Yes)

 

1 <div class="vertical">
2      <div class="content"></div>
3 </div>

 1 .vertical {
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     margin: 0 auto;
 6     margin-top: 10px;
 7     border: 1px solid blue;
 8 }
 9 .content {
10     position: absolute;
11     width: 50px;
12     height: 50px;
13     background-color: red;
14     margin: auto;
15     left: 0;
16 　　 right: 0;
17  　　top: 0;
18  　　bottom: 0;
19 }

　　技術講解：子元素寬高固定，設置 position: absolute，top 和 bottom 設置爲0以後能夠實現自適應垂直居中，同理也能夠實現水平居中。垂直居中是大多數人最先開始接觸到的垂直居中方法，實現簡單，理解起來也不復雜，兼容性強，在實際中的運用也比較普遍。可是由於元素使用絕對定位會脫離文檔流，因此這種方法經常用來對對話框和彈窗進行定位，也經常用於對界面基礎結構進行佈局。（以下）

　　技術要點：絕對定位的定位參照物爲第一個具備非 static 定位的祖先元素，因此父元素的 position 屬性必須是非 static 的屬性才能實現垂直居中，且子元素需設置 margin: auto。

　　優勢：實現簡單，易理解，兼容性強，適用於多種場景，自適應性強。

　　缺點：只能對 block 元素進行垂直居中，切會脫離文檔流，因此使用的時候須要注意。

 　　

Level 2：行高

　　兼容性：

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
(Yes)	(Yes)	IE8+	(Yes)	(Yes)

1 <div class="vertical">
2     <div class="content">content</div>
3 </div> 

 1 .vertical {
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     line-height: 200px;
 6     margin: 0 auto;
 7     margin-top: 10px;
 8     border: 1px solid blue;
 9     font-size: 0;
10 }
11 .content {
12     display: inline-block;
13     width: 50px;
14     height: 50px;
15     background-color: red;
16     vertical-align: middle;
17     font-size: 12px;
18     line-height: 1.2em;
19 }

　　或者

1 <div class="vertical">
2     content
3 </div> 

1 .vertical {
2     position: relative;
3     width: 200px;
4     height: 200px;
5     line-height: 200px;
6     margin: 0 auto;
7     margin-top: 10px;
8     border: 1px solid blue;
9 }

　　技術講解：經過行高來實現垂直居中也是一個經常使用的方式，把行高 line-height 和 高度 height 設置爲相同值，可實現子元素垂直居中。子元素只能是 inline 類型或者 inline-block 類型，須要注意的是，經過這種方式實現的垂直居中，一行文字的行高也就是整個父元素的高度（包括 inline 元素如 <span> ，inline-block 元素如 <img>），所以文本內容只能顯示一行，其他的則會溢出。若是子元素是 inline-block 類型，那麼須要設置 vertical-align: middle，不過這不是絕對的垂直居中。相信你們也看見前面畫橫線的部分，出現了奇怪的 font-size:0，這是由於 inline-block 類型對齊的只是文本的基線（baseline），而不是文本的中線（關於基線和中線，來源於 inline-box 的概念，詳情可參見張鑫旭的文章：css行高line-height的一些深刻理解及應用）。因此須要設置 font-size:0 ，來使 inline-box 模型的高度爲0，這樣其中線和基線就在一條線上了。同時還須要注意的是，因爲line-height 和 font-size 的繼承性，因此在子元素上須要對其進行修復。使用行高進行垂直居中是很是廣泛的應用，因爲其能夠控制子元素垂直居中，因此經常用來製做導航欄的樣式。（以下）

　　

　　技術要點：將 line-height 和 height 設置爲相同值實現垂直居中。inline 類型的子元素只能顯示一行文字，inline-block 類型的子元素要注意其對齊的是基線，所以要經過設置 font-size:0 來實現絕對垂直居中。

　　優勢：兼容性強，實現簡單，可對 inline-block 以及 inline 類型的元素垂直居中。

　　缺點：須要對其父元素進行徹底的控制，且 inline 類型子元素文本只能顯示一行，靈活性不強。

 

Level 3：表格單元（table-cell）

 　　兼容性：

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
(Yes)	(Yes)	IE8+	(Yes)	(Yes)

1 <div class="vertical">
2     <div class="content"></div>
3     this is test this is test this is test this is test 
4 </div> 

 1 .vertical {
 2     display: table-cell;
 3     width: 200px;
 4     height: 200px;
 5     border: 1px solid blue;
 6     vertical-align: middle;
 7     text-align: center;
 8 }
 9 .content {
10     display: block;
11     width: 50px;
12     height: 50px;
13     margin: 0 auto;
14     background-color: red;
15 }

　　技術講解：父元素設置 display:table-cell，並將垂直對齊方式設置爲 vertical-align:middle 可實現子元素垂直居中。使用 table-cell 進行垂直居中也是一個較經常使用的方法，該方法比用 line-height 更靈活，可是其父元素由於具備表格的屬性稍微較難控制，所以最好的是在外面再加一層 wraper 。這種方法實現垂直居中，子元素爲 inline、inline-block、block都可，且沒有使用行高那樣只能顯示一行文本的限制，而且具備自適應性。（相關實例目前我尚未發現o(￣▽￣)ｄ ）

　　技術要點：設置父元素 displate:table-cell 以及 vertical-align:middle 實現垂直居中，必要時建議加上一個 wraper。

　　優勢：子元素能夠爲多種類型的元素，block、inline-block、inline 類型都可，使用範圍廣，且具備自適應性。

　　缺點：父元素具備表格屬性，由於較難控制，建議使用時加上一個 wraper。

 

Level 4: writing-mode

　　兼容性：

Chrome	Firefox	Internet Explorer	Opera	Safari
8+	41+	IE8+(partial)	?	?

1 <div class="vertical">
2     <div class="content">content</div>
3 </div> 

 1 .vertical {
 2     display: block;
 3     width: 200px;
 4     height: 200px;
 5     border: 1px solid blue;
 6     writing-mode: vertical-lr;
 7     writing-mode: tb-lr;/* 兼容IE */
 8 }
 9 .content {
10     display: block;
11     width: 100px;
12     height: 100px;
13     margin: auto 0;
14     background-image: url("img.jpg");
15     writing-mode: horizontal-tb;
16 }

　　Chrome & FireFox

　　IE

　　技術講解：經過 writing-mode 來實現垂直居中相信大多數人都沒有據說過，不過該方法也幾乎沒有見過在實際中的運用，除了改變文本方向以外。相信咱們全部人在最開始學習到塊元素水平居中 margin:0 auto 的時候，都曾幻想加一個 auto 來實現垂直居中，but it doesn't work。可是如今咱們要回來了，咱們要使用 margin 來實現垂直居中，writing-mode 的做用是改變文檔流的方向，由於瀏覽器的文檔流方向默認是從上到下，從左向右，咱們把先後順序換一下，換成從左向右，從上到下，這樣一來原來的 width 變成了 height，原來的 height 變成了width，從而使盒模型轉換了90度。也就是說一切的排版規則不變，只是本來站立的人如今趟下了，以前的一切特性也會跟着一塊兒躺下，好比外邊距 margin 等等。若是說只是用於實現垂直居中的話，子元素要修復文檔流方向，由於 writing-mode 具備繼承性。不過在IE上就不那麼樂觀了，IE有其自身實現 writing-mode 的值，在這裏就不一一列舉了。在IE當中若是修復子元素的話，子元素自己也會被修復，也就是說子元素自己的排版會按照修復屬性的樣式，這裏你們能夠自行測試。這種方法還有一個須要注意的是，改變文檔流的方向並不會改變其背景圖片的排版方向。此方法實際運用意義不大，而且兼容性很差（只是單純的針對IE而已。。。），拿它來炫技是個不錯的選擇。

　　技術要點：設置父元素 writing-mode: vertical-lr 改變文檔流方向，子元素設置 margin: auto 0 實現垂直居中，若有必要給子元素加上 writing-mode: horizontal-tb 修復文檔流。

　　優勢：自適應性強，與絕對定位實現效果相似，且不會脫離文檔流。

　　缺點：實用性不大，兼容性差，只能對 block 類型元素實現垂直居中。

 

Level 5：flex佈局

　　兼容性：

Chrome	Firefox	Internet Explorer	Opera	Safari
21+	28+	10+(partial)	12.1+	6.1+

1 <div class="vertical">
2     <div class="content"></div>
3     <div class="content2"></div>
4 </div> 

 1 .vertical {
 2     display: flex;
 3     flex-direction: row;
 4     width: 200px;
 5     height: 200px;
 6     border: 1px solid blue;
 7     justify-content: center;
 8     align-items: center;
 9 }
10 .content {
11     width: 50px;
12     height: 50px;
13     background-color: red;
14 }
15 .content2 {
16     width: 50px;
17     height: 80px;
18     background-color: green;
19 }

　　技術講解：隨着CSS3的到來，咱們終於有了官方標準的垂直居中方法，flex佈局是w3c針對複雜的文檔模式新提出來的一種佈局方案，目前瀏覽器兼容性還算樂觀，隨着IE市場的衰減，flex佈局將會成爲將來佈局的主流。這種佈局方法靈活多變，可適應不一樣的文檔流和各類場合。其中使其垂直居中生效的方法是 justify-content 和 align-items ，不過要注意主軸 flex-direction 的方向，默認值是 row（及水平的文檔流），注意這裏和傳統的默認從上到下的文檔流相反。justify-content 設置主軸上的對齊方式，也就是相對於主軸的水平對齊方式，aligh-items 設置交叉軸的對齊方式，也就是相對於主軸的垂直對齊方式。關於具體的 flex 佈局教程，能夠參加大漠的《圖解CSS3：核心技術與案例實戰》，或者阮一峯的文章Flex 佈局教程：語法篇。雖然說目前爲止 Flex 佈局對於IE的兼容性不完整，可是在移動端 Flex 但是已經大有做爲了，而且從此隨着IE用戶逐漸轉移到edge上，flex佈局將會代替許多傳統的方法。

　　技術要點：父容器設置 display:flex 使用 flex 佈局，經過 flex-direction 設置主軸方向再用 justify-content 和 aligh-items 設置水平或垂直方向的對齊方式，注意主軸方向與對齊方向的關係。

　　優勢：適用範圍廣，自適應性強，靈活性高，可對任意類型子元素實現垂直居中。

　　缺點：目前兼容不完善（只是目前爲止）。

總結

　　垂直居中的方法五花八門，細數起來確定不僅這5種，可是歸根到底其實現的思想和技術核心倒是同樣的。以上5種方法是對不一樣垂直居中方法的一個總結，排名順序依照技術實現的難易度、可理解性的複雜度、以及大多數人的接觸順序的綜合分析。目前瀏覽器的兼容性測試還不夠徹底，若有錯誤或者補充，歡迎在評論中指出。

　　以上 DEMO 運行平臺： Windows 10 & FireFox 54

　　在線測試平臺：jsfiddle

參考文獻：

　　大漠 —— 《圖解CSS3：核心技術與案例實戰》

　　張鑫旭 —— 《改變CSS世界縱橫規則的writing-mode屬性》

　　張鑫旭 —— 《css行高line-height的一些深刻理解及應用》

　　阮一峯 —— 《Flex 佈局教程：語法篇》