網頁內容「垂直居中」的幾個常用方法及利弊

2016-10-10 08:16

網頁設計

標籤：css

1003

在css中對元素進行水平居中是這樣：如果它是乙個行內元素，就對它應用text-align:center;，如果它是乙個塊級元素，就對它自身應用margin:auto;。然而如果要對乙個元素進行垂直居中，可能光是想想就令人頭皮發麻了。

多年以來，垂直居中已經成為css領域的傳說，它同樣也是前段開發圈內廣為流傳的笑話。原因在於它具有以下幾條特徵。

這裡我們就從這樣一段**開始，我們將它直接插入元素裡：

麻煩給我垂直居中下

我們先來看乙個早期的垂直居中方法，它要求元素具有固定的寬度和高度：

main

這段**的本質上做了這樣幾件事情：先把這個元素的左上角放置在視口的正中心，然後再利用負邊距把它向左、向上移動，從而把元素的正中心放置在視口的正中心。借助calc()函式，這段**可以省掉兩行宣告：

main

顯然，這個方法最大的侷限在於它要求元素的寬高是固定的，在通常情況下，對那些需要垂直居中的元素來說，其尺寸往往由其內容來決定的。如果能找到乙個屬性的百分比值以元素自身的寬高作為解析基準，那我們的難題就迎刃而解了。但遺憾的是，對於絕大多數css屬性來說，百分比都是以其父元素的尺寸為基準進行解析的。

當我們在transform()變形函式中使用百分比值時，是以這個元素自身的寬度和高度為基準進行轉換和移動的，而這正是我們所需求的。接下來，只要換成基於百分比的css變形來對元素進行偏移就可以了：

main

麻煩給我垂直居中下

從上面這個效果我們可以看出，已經非常完美了，但這個方法使用上也應該有一些需要注意的地方：

假設我們不想使用絕對定位，仍然採用translate()技巧來把這個元素以其自身寬高的一半為距離進行移動；但是在缺少left和top的情況下，如何把這個元素的左上角放置在容器的正中心呢？

我們第一反應可能是用margin屬性的百分比值來實現，就像這樣：

main

不過，這段**產生十分離譜的效果。原因是在於margin的百分比值是以父元素的寬度作為解析基準的。沒錯，即使對於margin-top和margin-bottom來說也是這樣的。

麻煩給我垂直居中下

不過幸運的是，如果只是想把元素相對於視口進行居中，仍然是有希望的。css值與單位(第三版)定義了一套新的單位，稱為視口相關長度單位。

在我們的這個例子中，適用於外邊距的是vh單位：

main

當然，這個技巧只適用於視口的居中效果。

這是毋庸置疑的最佳解決方案，因為flexbox(伸縮盒)是專門針對這類需求所設計的。我們之所以討論其他方案，僅僅是因為這些方案在瀏覽器的支援上稍微好一些而已。其實目前現代瀏覽器對flexbox的支援度已經相當不錯了。

我們只需兩行宣告即可，先給這個待居中元素的父元素設定display:flex(這個例子中是元素)，再給這個元素(元素)自身設定我們熟悉的margin居中：

body

main

請注意，當我們使用flexbox時，margin:auto不僅是在水平方向上將元素居中，垂直方向上也是如此。還有一點，我們甚至不需要指定任何寬度：這個居中元素分配到的寬度等於max-content。

flexbox的另外乙個好處在於，它可以將匿名容器(即沒有被標籤包裹的文字節點)垂直居中，舉個來說，假如我們的結構**是這樣：

我是匿名容器

我們先給這個main元素指定乙個固定的尺寸，然後借助flexbox規範所引入的align-items和justify-content屬性，我們可以讓它內部的文字也實現居中。

main

我是匿名容器盒子

有幾種非主流的方法(**布局法、行內塊法)也可以實現這個效果，我們在這裡不做討論，有興趣的朋友可以查閱下chris coyier寫的"不為人知的居中方法」。

根據盒對齊模型(第三版)的計畫，在未來，對於簡單的垂直居中需求，我們完全不需要動用特殊布局模式了。只要下面這段**就可以搞定了。期望它能早點被多數瀏覽器所實現：

align-self:center;