在 CSS 中對(duì)元素進(jìn)行水平居中是非常簡(jiǎn)單的：如果它是一個(gè)行內(nèi)元素， 就對(duì)它的父元素應(yīng)用 text-align:center; 如果它是一個(gè)塊級(jí)元素，就對(duì)它自身應(yīng)用 margin:auto。然而如果要對(duì)一個(gè)元素進(jìn)行垂直居中，可能光是想想就令人頭皮發(fā)麻了。
長(zhǎng)久以來(lái)，為了解決這一絕世難題，前端開(kāi)發(fā)者們殫精竭慮，琢磨出了各種解決方法，可惜大多數(shù)并不實(shí)用。在本篇攻略中，我們將探索現(xiàn)代 CSS 的強(qiáng)大威力，以全新的思路去攻克各種場(chǎng)景下的垂直居中難題。請(qǐng)注意，有幾種技巧十分流行，但在這里并不會(huì)深入探討，原因如下：
表格布局法(利用表格的顯示模式)需要用到一些冗余的 HTML 元素，實(shí)現(xiàn)起來(lái)不夠優(yōu)雅簡(jiǎn)潔，因此這里不多介紹。
行內(nèi)塊法也不作討論，因?yàn)樵谖铱磥?lái)這種方法 hack 的味道很濃。
如果你有興趣，可以去看看 Chris Coyier 寫(xiě)的 Centering in the Unknown。這篇出色的文章詳細(xì)講述了這兩種技巧。
我們將使用如下所示的結(jié)構(gòu)代碼，并直接插入元素中（但實(shí)際上我們將要探索的這些技巧是與容器無(wú)關(guān)的）：
<main>
`<h1>Am I centered yet?</h1> <p>Center me, please!</p>`
</main>
基于絕對(duì)定位
我們先來(lái)看一個(gè)早期的垂直居中方法，它要求元素具有固定的寬度和高度：
main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
/* 6/2 = 3 */
margin-left: -9em;
/* 18/2 = 9 */
width: 18em;
height: 6em;
}
這段代碼在本質(zhì)上做了這樣幾件事情：
- 先把這個(gè)元素的左上角放置在視口（或最近的、具有定位屬性的祖先元素）的正中心。
- 然后再利用負(fù)外邊距把它向左、向上移動(dòng)（移動(dòng)距離相當(dāng)于它自身寬高的一半），從而把元素的正中心放置在視口的正中心。
借助強(qiáng)大的 calc() 函數(shù)，這段代碼還可以省掉兩行聲明：
main {
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
顯然，這個(gè)方法最大的局限在于它要求元素的寬高是固定的。
在通常情況下，對(duì)那些需要居中的元素來(lái)說(shuō)，其尺寸往往是由其內(nèi)容來(lái)決定的。如果 能找到一個(gè)屬性的百分比值以元素自身的寬高作為解析基準(zhǔn)，那我們的難題就迎刃而解了！遺憾的是，對(duì)于絕大多數(shù) CSS 屬性(包括 margin)來(lái)說(shuō)， 百分比都是以其父元素的尺寸為基準(zhǔn)進(jìn)行解析的。
CSS 領(lǐng)域有一個(gè)很常見(jiàn)的現(xiàn)象，真正的解決方案往往來(lái)自于我們最意想不到的地方。
在這個(gè)例子中，答案來(lái)自于 CSS Transforms 。當(dāng)我們?cè)?translate() 變形函數(shù)中使用百分比值時(shí)，是以這個(gè)元素自身的寬度和高度為基準(zhǔn)進(jìn)行換算和移動(dòng)的，而這正是我們所需要的。接下來(lái)，只要換用基于百分比的 CSS 變形來(lái)對(duì)元素進(jìn)行偏移，就不需要在偏移量中把元素的尺寸寫(xiě)死。這樣我們就可以徹底解除對(duì)固定尺寸的依賴：
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
可以看到，這個(gè)容器已經(jīng)完美居中了，完全滿足我們的期望。
當(dāng)然，沒(méi)有任何技巧是十全十美的，上面這個(gè)方法也有一些需要注意的地方：
我們有時(shí)不能選用絕對(duì)定位，因?yàn)樗鼘?duì)整個(gè)布局的影響太過(guò)強(qiáng)烈。
如果需要居中的元素已經(jīng)在高度上超過(guò)了視口，那它的頂部會(huì)被視口裁切掉。有一些辦法可以繞過(guò)這個(gè)問(wèn)題，但 hack 味道過(guò)濃。
在某些瀏覽器中，這個(gè)方法可能會(huì)導(dǎo)致元素的顯示有一些模糊，因 為元素可能被放置在半個(gè)像素上。這個(gè)問(wèn)題可以用
transform-style:preserve-3d來(lái)修復(fù)，不過(guò)這個(gè)修復(fù)手段也可以認(rèn)為是一個(gè) hack，而且很難保證它在未來(lái)不會(huì)出問(wèn)題。
線上例子：
http://dabblet.com/gist/cd12fac0e18bb27fb62d
基于 viewport
假設(shè)我們不想使用絕對(duì)定位，仍然可以采用 translate() 技巧來(lái)把這 個(gè)元素以其自身寬高的一半為距離進(jìn)行移動(dòng)；但是在缺少 left 和 top 的情況下，如何把這個(gè)元素的左上角放置在容器的正中心呢？
我們的第一反應(yīng)很可能是用 margin 屬性的百分比值來(lái)實(shí)現(xiàn)，就像這樣：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50% auto 0;
transform: translateY(-50%);
}
不過(guò)，如圖所示，這段代碼會(huì)產(chǎn)生十分離譜的結(jié)果：
原因在于 margin 的百分比值是以父元素的寬度作為解析基準(zhǔn)的 。沒(méi)錯(cuò)，即使對(duì)于 margin-top 和 margin-bottom 來(lái)說(shuō)也是這樣！
不過(guò)幸運(yùn)的是，如果只是想把元素相對(duì)于視口進(jìn)行居中，仍然是有希望的?！綜SS Values and Units Module Level 3】(https://www.w3.org/TR/css-values-3/#relative-lengths) 定義了一套新的單位，稱為 viewport 相關(guān)的長(zhǎng)度單位。
- vw ：1% of viewport’s width
- vh ：1% of viewport’s height
- vmin ：1% of viewport’s smaller dimension
- vmax ：1% of viewport’s larger dimension
在我們的這個(gè)例子中，適用于外邊距的是 vh 單位：
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
可以看到，其效果堪稱完美。當(dāng)然，這個(gè)技巧的實(shí)用性是相當(dāng)有限的，因?yàn)樗贿m用于在視口中居中的場(chǎng)景。
線上例子：
http://dabblet.com/gist/bf12b39d8f5da2b6e5b6
基于 Flexbox
這是毋庸置疑的最佳解決方案，因?yàn)?Flexbox 是專門(mén)針對(duì)這類(lèi)需求所設(shè)計(jì)的。我們之所以要討論其他方案，僅僅是因?yàn)槟切┓桨冈跒g覽器的支持程度上稍微好一些而已。但其實(shí)目前現(xiàn)代瀏覽器對(duì) Flexbox 的支持度已經(jīng)相當(dāng)不錯(cuò)了。
我們只需寫(xiě)兩行聲明即可：
先給這個(gè)待居中元素的父元素設(shè)置
display:flex（在這個(gè)例子中是<body>元素）。再給這個(gè)元素自身設(shè)置我們?cè)偈煜げ贿^(guò)的
margin:auto（在這個(gè)例子中是<main>元素）。
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}
請(qǐng)注意，當(dāng)我們使用 Flexbox 時(shí)，margin: auto 不僅在水平方向上將元素居中，垂直方向上也是如此。還有一點(diǎn)，我們甚至不需要指定任何寬度(當(dāng)然，如果需要的話，也是可以指定的)：這個(gè)居中元素分配到的寬度等于 max-content。
如果瀏覽器不支持 Flexbox，頁(yè)面渲染結(jié)果看起來(lái)就跟我們的起點(diǎn)圖是一樣的了(如果設(shè)置了寬度的話)。雖然沒(méi)有垂直居中效果，但也是完全可以接受的。
Flexbox 的另一個(gè)好處在于，它還可以將匿名容器(即沒(méi)有被標(biāo)簽包裹的文本節(jié)點(diǎn))垂直居中。舉個(gè)例子，假設(shè)我們的結(jié)構(gòu)代碼是：
<main>Center me, please!</main>
我們先給這個(gè) main 元素指定一個(gè)固定的尺寸，然后借助 Flexbox 規(guī)范 所引入的 align-items 和 justify-content 屬性，我們可以讓它內(nèi)部的文本也實(shí)現(xiàn)居中：
main {
display: flex;
align-items: center; justify-content: center; width: 18em;
height: 10em;
}
關(guān)于未來(lái)
根據(jù)【CSS Box Alignment Module Level 3】(http://w3.org/TR/css-align) 的計(jì)劃，在未來(lái)，對(duì)于簡(jiǎn)單的垂直居中需求， 我們完全不需要?jiǎng)佑锰厥獾牟季帜Ｊ搅恕Ｒ驗(yàn)橹恍枰旅孢@行代碼就可以搞定：
align-self: center;
不管這個(gè)元素上還應(yīng)用了其他什么屬性，這樣寫(xiě)就夠了。這聽(tīng)起來(lái)可能難以置信，但或許你電腦上的瀏覽器很快就會(huì)讓它成為現(xiàn)實(shí)。
