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