本篇文章給大家?guī)?lái)了幾種css實(shí)現(xiàn)垂直居中水平居中的絕對(duì)定位居中技術(shù)的相關(guān)知識(shí)，希望對(duì)大家有幫助。

Ⅰ.絕對(duì)定位居中(Absolute Centering)技術(shù)

我們經(jīng)常用margin:0 auto來(lái)實(shí)現(xiàn)水平居中，而一直認(rèn)為margin:auto不能實(shí)現(xiàn)垂直居中……實(shí)際上，實(shí)現(xiàn)垂直居中僅需要聲明元素高度和下面的CSS:

.Absolute-Center {   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; }

我不是這種實(shí)現(xiàn)方法的第一人，可能這只是非常常見(jiàn)的一種小技術(shù)，我斗膽將其命名為絕對(duì)居中(Absolute Centering)，雖然如此，但是大多數(shù)討論垂直居中的文章卻從來(lái)不提這種方法，直到我最近瀏覽《How to Center Anything WithCSS》這篇文章的評(píng)論時(shí)候才發(fā)現(xiàn)這種用法。在評(píng)論列表中Simon和Priit都提及了此方法。

如果你有任何擴(kuò)展的功能或建議，可以在此跟帖：

CodePen

SmashingMagazine

Twitter @shshaw

優(yōu)點(diǎn)：

1.支持跨瀏覽器，包括IE8-IE10.

2.無(wú)需其他特殊標(biāo)記，CSS代碼量少

3.支持百分比%屬性值和min-/max-屬性

4.只用這一個(gè)類(lèi)可實(shí)現(xiàn)任何內(nèi)容塊居中

5.不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下）

6.內(nèi)容塊可以被重繪。

7.完美支持圖片居中。

缺點(diǎn)：

1.必須聲明高度（查看可變高度Variable Height）。

2.建議設(shè)置overflow:auto來(lái)防止內(nèi)容越界溢出。（查看溢出Overflow）。

3.在Windows Phone設(shè)備上不起作用。

瀏覽器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

絕對(duì)定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測(cè)試通過(guò)。

對(duì)比表格：

絕對(duì)居中法并不是唯一的實(shí)現(xiàn)方法，實(shí)現(xiàn)垂直居中還有些其他的方法，并各有各的優(yōu)勢(shì)。采用哪種技術(shù)取決于你的瀏覽器是否支持和你使用的語(yǔ)言標(biāo)記。這個(gè)對(duì)照表有助于你根據(jù)自己的需求做出正確的選擇。

解釋：

通過(guò)以上描述，絕對(duì)居中（AbsoluteCentering）的工作機(jī)理可以闡述如下：

1、在普通內(nèi)容流（normal content flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

W3C中寫(xiě)道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

2、position:absolute使絕對(duì)定位塊跳出了內(nèi)容流，內(nèi)容流中的其余部分渲染時(shí)絕對(duì)定位部分不進(jìn)行渲染。

Developer.mozilla.org:…an element that is positioned absolutely is taken out of the flow and thustakes up no space

3、為塊區(qū)域設(shè)置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配一個(gè)邊界框，此時(shí)該塊block將填充其父元素的所有可用空間，父元素一般為body或者聲明為position:relative;的容器。

Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).

4、 給內(nèi)容塊設(shè)置一個(gè)高度height或?qū)挾葁idth，能夠防止內(nèi)容塊占據(jù)所有的可用空間，促使瀏覽器根據(jù)新的邊界框重新計(jì)算margin:auto

Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.

5、由于內(nèi)容塊被絕對(duì)定位，脫離了正常的內(nèi)容流，瀏覽器會(huì)給margin-top,margin-bottom相同的值，使元素塊在先前定義的邊界內(nèi)居中。

W3.org: If none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically

這么看來(lái)， margin:auto似乎生來(lái)就是為絕對(duì)居中(Absolute Centering)設(shè)計(jì)的，所以絕對(duì)居中(Absolute Centering)應(yīng)該都兼容符合標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。

簡(jiǎn)而言之（TL;DR）：絕對(duì)定位元素不在普通內(nèi)容流中渲染，因此margin:auto可以使內(nèi)容在通過(guò)top: 0; left: 0; bottom: 0;right: 0;設(shè)置的邊界內(nèi)垂直居中。

居中方式：

一、容器內(nèi)（Within Container）

內(nèi)容塊的父容器設(shè)置為position:relative，使用上述絕對(duì)居中方式，可以使內(nèi)容居中顯示于父容器。

.Center-Container {   position: relative; }  .Absolute-Center {   width: 50%;   height: 50%;   overflow: auto;   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; }

以下其余的demo默認(rèn)上面的CSS樣式已引用包括進(jìn)去，在此基礎(chǔ)上只提供額外的類(lèi)供用戶(hù)追加以實(shí)現(xiàn)不同的功能。

二、視區(qū)內(nèi)（Within Viewport）

想讓內(nèi)容塊一直停留在可視區(qū)域內(nèi)？將內(nèi)容塊設(shè)置為position:fixed;并設(shè)置一個(gè)較大的z-index層疊屬性值。

.Absolute-Center.is-Fixed {   position: fixed;   z-index: 999; }

注意：對(duì)MobileSafari，若內(nèi)容塊不是放在設(shè)置為position:relative;的父容器中，內(nèi)容塊將垂直居中于整個(gè)文檔，而不是可視區(qū)域內(nèi)垂直居中。

三、邊欄 (Offsets)

如果你要設(shè)置一個(gè)固頂?shù)念^或增加其他的邊欄，只需要在內(nèi)容塊的樣式中加入像這樣的CSS樣式代碼：top:70px;bottom:auto;由于已經(jīng)聲明了margin:auto;，該內(nèi)容塊將會(huì)垂直居中于你通過(guò)top,left,bottom和right屬性定義的邊界框內(nèi)。

你可以將內(nèi)容塊固定與屏幕的左側(cè)或右側(cè)，并且保持內(nèi)容塊垂直居中。使用right:0;left:auto;固定于屏幕右側(cè)，使用left:0;right:auto;固定與屏幕左側(cè)。

.Absolute-Center.is-Right {   left: auto; right: 20px;   text-align: right; }  .Absolute-Center.is-Left {   right: auto; left: 20px;   text-align: left; }

四、響應(yīng)式/自適應(yīng)(Responsive)

絕對(duì)居中最大的優(yōu)勢(shì)應(yīng)該就是對(duì)百分比形式的寬高支持的非常完美。甚至min-width/max-width 和min-height/max-height這些屬性在自適應(yīng)盒子內(nèi)的表現(xiàn)也和預(yù)期很一致。

.Absolute-Center.is-Responsive {   width: 60%;    height: 60%;   min-width: 200px;   max-width: 400px;   padding: 40px; }

給內(nèi)容塊元素加上padding也不影響內(nèi)容塊元素的絕對(duì)居中實(shí)現(xiàn)。

五、 溢出情況(Overflow)

內(nèi)容高度大于塊元素或容器（視區(qū)viewport或設(shè)為position:relative的父容器）會(huì)溢出，這時(shí)內(nèi)容可能會(huì)顯示到塊與容器的外面，或者被截?cái)喑霈F(xiàn)顯示不全（分別對(duì)應(yīng)內(nèi)容塊overflow屬性設(shè)置為visible和hidden的表現(xiàn)）。

加上overflow: auto會(huì)在內(nèi)容高度超過(guò)容器高度的情況下給內(nèi)容塊顯示滾動(dòng)條而不越界。

.Absolute-Center.is-Overflow {   overflow: auto; }

如果內(nèi)容塊自身不設(shè)置任何padding的話(huà)，可以設(shè)置max-height: 100%;來(lái)保證內(nèi)容高度不超越容器高度。

六、重繪(Resizing)

你可以使用其他class類(lèi)或javascript代碼來(lái)重繪內(nèi)容塊同時(shí)保證居中，無(wú)須手動(dòng)重新計(jì)算中心尺寸。當(dāng)然，你也可以添加resize屬性來(lái)讓用戶(hù)拖拽實(shí)現(xiàn)內(nèi)容塊的重繪。

絕對(duì)居中（Absolute Centering）可以保證內(nèi)容塊始終居中，無(wú)論內(nèi)容塊是否重繪?？梢酝ㄟ^(guò)設(shè)置min-/max-來(lái)根據(jù)自己需要限制內(nèi)容塊的大小，并防止內(nèi)容溢出窗口/容器。

.Absolute-Center.is-Resizable {   min-width: 20%;   max-width: 80%;   min-height: 20%;   max-height: 80%;   resize: both;   overflow: auto; }

如果不使用resize:both屬性，可以使用CSS3動(dòng)畫(huà)屬性transition來(lái)實(shí)現(xiàn)重繪的窗口之間平滑的過(guò)渡。一定要設(shè)置overflow:auto;以防重繪的內(nèi)容塊尺寸小于內(nèi)容的實(shí)際尺寸這種情況出現(xiàn)。

絕對(duì)居中（AbsoluteCentering）是唯一支持resize:both屬性實(shí)現(xiàn)垂直居中的技術(shù)。

注意：

• 要設(shè)置max-width/max-height屬性來(lái)彌補(bǔ)內(nèi)容塊padding，否則可能溢出。

• 手機(jī)瀏覽器和IE8-IE10瀏覽器不支持resize屬性，所以如果對(duì)你來(lái)說(shuō)，這部分用戶(hù)體驗(yàn)很必要，務(wù)必保證對(duì)resizing你的用戶(hù)有可行的退路。

• 聯(lián)合使用resize 和 transition屬性會(huì)在用戶(hù)重繪時(shí)，產(chǎn)生一個(gè)transition動(dòng)畫(huà)延遲時(shí)間。

七、圖片(Images)

絕對(duì)居中（AbsoluteCentering）也適用于圖片。對(duì)圖片自身應(yīng)用class類(lèi)或CSS樣式，并給圖片添加height:auto樣式，圖片會(huì)自適應(yīng)居中顯示，如果外層容器可以resize則隨著容器的重繪，圖片也相應(yīng)重繪，始終保持居中。

需要注意的是height:auto雖然對(duì)圖片居中有用，但如果是在圖片外層的內(nèi)容塊上應(yīng)用了height:auto則會(huì)產(chǎn)生一些問(wèn)題：規(guī)則的內(nèi)容塊會(huì)被拉伸填充整個(gè)容器。這時(shí)，我們可以使用可變高度(Variable Height)方式解決這個(gè)問(wèn)題。問(wèn)題的原因可能是渲染圖片時(shí)要計(jì)算圖片高度，這就如同你自己定義了圖片高度一樣，瀏覽器得到了圖片高度就不會(huì)像其他情況一樣去解析margin:auto垂直居中了。所以我們最好對(duì)圖片自身應(yīng)用這些樣式而不是父元素。

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {   height: auto; }  .Absolute-Center.is-Image img {    width: 100%;   height: auto; }

最好是對(duì)圖片自身應(yīng)用此方法，效果如下圖：

八、可變高度（Variable Height）

這種情況下實(shí)現(xiàn)絕對(duì)居中（AbsoluteCentering）必須要聲明一個(gè)高度，不管你是基于百分比的高度還是通過(guò)max-height控制的高度，還有，別忘了設(shè)置合適的overflow屬性。對(duì)自適應(yīng)/響應(yīng)式情景，這種方法很不錯(cuò)。

與聲明高度效果相同的另一種方法是設(shè)置display:table;這樣無(wú)論實(shí)際內(nèi)容有多高，內(nèi)容塊都會(huì)保持居中。這種方法在一些瀏覽器（如IE/FireFox）上會(huì)有問(wèn)題，我的搭檔Kalley

在ELL Creative（訪(fǎng)問(wèn)ellcreative.com ）上寫(xiě)了一個(gè)基于Modernizr插件的檢測(cè)函數(shù)，用來(lái)檢測(cè)瀏覽器是否支持這種居中方法，進(jìn)一步增強(qiáng)用戶(hù)體驗(yàn)。

Javascript：

/* Modernizr Test for Variable Height Content */ Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop); });

CSS：

.absolutecentercontent .Absolute-Center.is-Variable {   display: table;   height: auto; }

缺點(diǎn)：

瀏覽器兼容性不太好，若Modernizr不能滿(mǎn)足你的需求，你需要尋找其他方法解決。

1.與上述重繪(Resizing)情況的方法不兼容

2.Firefox/IE8:使用display:table會(huì)使內(nèi)容塊垂直居上，不過(guò)水平還是居中的。

3.IE9/10: 使用display:table會(huì)使內(nèi)容塊顯示在容器左上角。

4.Mobile Safari:內(nèi)容塊垂直居中；若使用百分比寬度，水平方向居中會(huì)稍微偏離中心位置。

Ⅱ.其他居中實(shí)現(xiàn)技術(shù)

絕對(duì)居中（Absolute Centering）是一種非常不錯(cuò)的技術(shù)，除此之外還有一些方法可以滿(mǎn)足