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 content3 </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-p_w_picpath: 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種方法是對不同垂直居中方法的一個總結，排名順序依照技術實現的難易度、可理解性的複雜度、以及大多數人的接觸順序的綜合分析。