CSS如何做到完全居中

這篇文章主要介紹“CSS如何做到完全居中”，在日常操作中，相信很多人在CSS如何做到完全居中問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS如何做到完全居中”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

我們都知道 margin:0 auto; 的樣式能讓元素水平居中，而 margin: auto; 卻不能做到垂直居中……直到現(xiàn)在。但是，請(qǐng)注意！想讓元素絕對(duì)居中，只需要聲明元素高度，并且附加以下樣式，就可以做到：

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

我并不是***個(gè)發(fā)現(xiàn)這種方法的人（不過(guò)我還是敢把它叫做“完全居中”），它有可能是種非常普遍的技巧。但大多數(shù)介紹垂直居中的文章中并沒(méi)有提到過(guò)這種方法。如果不是瀏覽這篇文章的評(píng)論，我甚至根本就不會(huì)發(fā)現(xiàn)這個(gè)辦法。

上面那篇文章的評(píng)論欄中，Simon提供了一個(gè)jsFiddle的鏈接，其他的方法相比之下就相形見(jiàn)絀了。（Priit也在評(píng)論欄中提到了同樣的方法）。深入研究了一番之后，我又用某些關(guān)鍵詞找到了記載這種方法的三個(gè)網(wǎng)站：站點(diǎn)一、站點(diǎn)二、站點(diǎn)三。

以前從未用過(guò)這種方法的我想試試，看看這種”完全居中”的方法到底有多么神奇。 好處：

• 跨瀏覽器，兼容性好（無(wú)需hack，可兼顧IE8~IE10）

• 無(wú)特殊標(biāo)記，樣式更精簡(jiǎn)

• 自適應(yīng)布局，可以使用百分比和***最小高寬等樣式

• 居中時(shí)不考慮元素的padding值（也不需要使用box-sizing樣式）

• 布局塊可以自由調(diào)節(jié)大小

• img的圖像也可以使用

同時(shí)注意：

• 必須聲明元素高度

• 推薦設(shè)置overflow:auto;樣式避免元素溢出，顯示不正常的問(wèn)題

• 這種方法在Windows Phone上不起作用

瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”經(jīng)測(cè)試可以***地應(yīng)用在***版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以運(yùn)行在IE8~IE10上

對(duì)照表

“完全居中”并不是本篇文章中唯一的選項(xiàng)。要做到垂直居中，還存在著其他方法，各有各的長(zhǎng)處。采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標(biāo)簽的結(jié)構(gòu)。下面這張對(duì)照表能夠幫你選出***你需要的方法。

說(shuō)明

在研究了規(guī)范和文檔后，我總結(jié)出了“完全居中”的工作原理：

1. 在普通文檔流里，margin: auto; 的意思是設(shè)置元素的margin-top和margin-bottom為0。W3.org  If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

2.  設(shè)置了position: absolute; 的元素會(huì)變成塊元素，并脫離普通文檔流。而文檔的其余部分照常渲染，元素像是不在原來(lái)的位置一樣。 Developer.mozilla.org …an element that is positioned absolutely is taken out of the flow and thus takes up no space

3. 設(shè)置了top: 0; left: 0; bottom: 0; right: 0;  樣式的塊元素會(huì)讓瀏覽器為它包裹一層新的盒子，因此這個(gè)元素會(huì)填滿它相對(duì)父元素的內(nèi)部空間，這個(gè)相對(duì)父元素可以是是body標(biāo)簽，或者是一個(gè)設(shè)置了 position: relative; 樣式的容器。 Developer.mozilla.org   For absolutely positioned elements, the top, right, bottom, and left  properties specify offsets from the edge of the element’s containing  block (what the element is positioned relative to).

4.  給元素設(shè)置了寬高以后，瀏覽器會(huì)阻止元素填滿所有的空間，根據(jù)margin: auto; 的要求，重新計(jì)算，并包裹一層新的盒子。 Developer.mozilla.org 。The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然塊元素是絕對(duì)定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會(huì)給margin-top和margin-bottom設(shè)置一個(gè)相等的值。 W3.org  If none of the three [top, bottom, height] 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.?AKA: center  the block vertically

使用“完全居中”，有意遵照了標(biāo)準(zhǔn)margin: auto; 樣式渲染的規(guī)定，所以應(yīng)當(dāng)在與標(biāo)準(zhǔn)兼容的各種瀏覽器中起作用。

對(duì)齊

容器內(nèi)對(duì)齊

使用“完全居中”，就可以在一個(gè)設(shè)置了position: relative的容器中做到完全居中元素了！

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

接下來(lái)的示例會(huì)假設(shè)已經(jīng)包含了以下樣式，并且以逐步添加樣式的方式提供不同的特性。

在可視區(qū)域內(nèi)居中

想要使內(nèi)容區(qū)在可視區(qū)域內(nèi)居中么？設(shè)置position: fixed樣式，并設(shè)置一個(gè)較高的z-index值，就可以做到。

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

移動(dòng)版Safari的說(shuō)明：如果外面沒(méi)有一層設(shè)置position: relative的容器，內(nèi)容區(qū)會(huì)以整個(gè)文檔的高度的中心點(diǎn)為基準(zhǔn)居中，而不是以可視區(qū)域的高度中心點(diǎn)為基準(zhǔn)居中。

偏移值

如果需要添加固定的標(biāo)題，或者其他帶偏移樣式的元素，可以直接把類似top: 70px; 的樣式寫(xiě)進(jìn)內(nèi)容區(qū)域的樣式中。一旦聲明了margin: auto; 的樣式，內(nèi)容塊的top left bottom right的屬性值也會(huì)同時(shí)計(jì)算進(jìn)去。

如果想讓內(nèi)容塊在貼近側(cè)邊的過(guò)程中保持水平居中，可以使用right: 0; left: auto; 讓內(nèi)容貼在右側(cè)，或者使用left: 0; right: auto; 使內(nèi)容貼在左側(cè)。

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

帶響應(yīng)式

使用absolute的***好處就是可以***地使用帶百分比的寬高樣式！就算是min-width/max-width或者min-height/max-height也能夠有如預(yù)期般的表現(xiàn)。

再進(jìn)一步加上padding樣式的話，absolute式的完全居中也絲毫不會(huì)破壞！

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

帶溢出內(nèi)容

內(nèi)容區(qū)高度大于可視區(qū)域或者一個(gè)position: relative的容器，其內(nèi)容可能會(huì)溢出容器，或被容器截?cái)?。只要?nèi)容區(qū)域沒(méi)有超出容器（沒(méi)有給內(nèi)容容器預(yù)留padding的話，可以設(shè)置max-height: 100%;的樣式），那么容器內(nèi)就會(huì)產(chǎn)生滾動(dòng)條。

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

大小可調(diào)整

使用其他樣式，或者使用JavaScript調(diào)整內(nèi)容區(qū)的大小，也是不用手動(dòng)重新計(jì)算的！如果設(shè)置了resize的樣式，甚至可以讓用戶自行調(diào)節(jié)內(nèi)容區(qū)域的大小。 “完全居中”法，無(wú)論內(nèi)容區(qū)怎么改變大小，都會(huì)保持居中。

設(shè)置了min-/max- 開(kāi)頭的屬性可以限制區(qū)塊的大小而不用擔(dān)心撐開(kāi)容器。

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

如果不設(shè)置resize: both的樣式，可以設(shè)置transition樣式平滑地在大小間切換。一定要記得設(shè)置overflow:  auto樣式，因?yàn)楦淖兇笮『蟮娜萜鞲邔捄苡锌赡軙?huì)小于內(nèi)容的高寬。 “完全居中”法是唯一一種能支持使用resize: both樣式的方法。

使用注意：

• 需要設(shè)置max-width/max-height給內(nèi)容區(qū)域留足夠的空間，不然就有可能使容器溢出。

• resize屬性不支持移動(dòng)版瀏覽器和IE8-10，如果用戶體驗(yàn)很重要的話，請(qǐng)確保用戶可以有其他替代方法來(lái)改變大小。

• 同時(shí)使用resize樣式和transition會(huì)使用戶在開(kāi)始改變大小時(shí)產(chǎn)生等于transition效果時(shí)間等長(zhǎng)的延時(shí)。

圖像

圖像也同樣有效！提供相應(yīng)的class，并指定樣式 height: auto; ，就得到了一張隨著容器改變大小的響應(yīng)式圖片。

請(qǐng)注意，height: auto; 樣式雖然對(duì)圖片有效，如果沒(méi)有用到了后面介紹的‘可變高技巧’，則會(huì)導(dǎo)致普通內(nèi)容區(qū)域伸長(zhǎng)以適應(yīng)容器長(zhǎng)度。

瀏覽器很有可能是根據(jù)渲染結(jié)果填充了圖像高度值，所以在測(cè)試過(guò)的瀏覽器中，margin: auto; 樣式就像是聲明了固定的高度值一般正常工作。

HTML:

<img src="http://placekitten.com/g/500/200" alt="" /> 

CSS:

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

可變高度

“完全居中”法的確需要聲明容器高度，但是高度受max-height樣式的影響，也可以是百分比。這非常適合響應(yīng)式的方案，只需要設(shè)置好帶溢出內(nèi)容就行。

另一種替代方案是設(shè)置display:  table樣式居中，，不管內(nèi)容的長(zhǎng)度。這種方法會(huì)在一些瀏覽器中產(chǎn)生問(wèn)題（主要是IE和Firefox）。我在ELL  Creative的朋友Kalley寫(xiě)了一個(gè)基于Modernizr 的測(cè)試，可以用來(lái)檢查瀏覽器是否支持這種居中方案?，F(xiàn)在這種方法可以做到漸進(jìn)增強(qiáng)。

注意要點(diǎn)： 這種方法會(huì)破壞瀏覽器兼容性，如果Modernizr測(cè)試不能滿足你的需求，你可能需要考慮其他的實(shí)現(xiàn)方案。

• 與大小可調(diào)整技術(shù)是不兼容的

• Firefox/IE8中使用display: table，內(nèi)容區(qū)在垂直方向靠上，水平方向仍然居中。

• IE9/10中使用display: table，內(nèi)容區(qū)會(huì)跑到左上角。

• 移動(dòng)版Safari中內(nèi)容區(qū)是水平對(duì)齊的，但是如果使用了百分比的寬度，水平方向上會(huì)稍稍偏離中心。

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; }

其他方法

“完全居中”法是解決居中問(wèn)題的好方法，同時(shí)也有許多可以滿足不同需求的其他方法。最常見(jiàn)的，推薦的方法有負(fù)margin值、transform 法、table-cell法、inline-block法、以及現(xiàn)在出現(xiàn)的Flexbox法，這些方法其他文章都有深入介紹，所以這里只會(huì)稍稍提及。

負(fù)margin值

這或許是最常用的方法。如果知道了各個(gè)元素的大小，設(shè)置等于寬高一半大小的負(fù)margin值（如果沒(méi)有使用box-sizing: border-box樣式，還需要加上padding值），再配合top: 50%; left: 50%;樣式就會(huì)使塊元素居中。

需要注意的是，這是按照預(yù)想情況也能在工作在IE6-7下的唯一方法。

.is-Negative {         width: 300px;         height: 200px;         padding: 20px;         position: absolute;         top: 50%; left: 50%;         margin-left: -170px; /* (width + padding)/2 */         margin-top: -120px; /* (height + padding)/2 */ }

好處：

• 瀏覽器兼容性非常好，甚至支持IE6-7

• 需要的編碼量很少

同時(shí)注意：

• 這是個(gè)非響應(yīng)式的方法，不能使用百分比的大小，也不能設(shè)置min-/max-的***值最小值。

• 內(nèi)容可能會(huì)超出容器

• 需要為padding預(yù)留空間，或者需要使用box-sizing: border-box樣式。

• 
  

transform法

和“完全居中”法的好處一樣，簡(jiǎn)單有效，同時(shí)支持可變高度。為內(nèi)容指定帶有廠商前綴的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內(nèi)容塊居中。

.is-Transformed {   width: 50%;   margin: auto;   position: absolute;   top: 50%; left: 50%;   -webkit-transform: translate(-50%,-50%);       -ms-transform: translate(-50%,-50%);           transform: translate(-50%,-50%); }

好處：

• 內(nèi)容高度可變

• 代碼量小

同時(shí)注意：

• 不支持IE8

• 需要寫(xiě)廠商前綴

• 會(huì)和其他transform樣式有沖突

• 某些情況下的邊緣和字體渲染會(huì)有問(wèn)題

table-cell法

這種可能是***的方法，因?yàn)楦叨瓤梢噪S內(nèi)容改變，瀏覽器支持也不差。主要缺陷是會(huì)產(chǎn)生額外的標(biāo)簽，每一個(gè)需要居中的元素需要三個(gè)額外的HTML標(biāo)簽。

HTML:

<div class="Center-Container is-Table">   <div class="Table-Cell">     <div class="Center-Block">     <!-- CONTENT -->     </div>   </div> </div>

CSS:

.Center-Container.is-Table { display: table; } .is-Table .Table-Cell {   display: table-cell;   vertical-align: middle; } .is-Table .Center-Block {   width: 50%;   margin: 0 auto; }

好處：

• 內(nèi)容高度可變

• 內(nèi)容溢出則能自動(dòng)撐開(kāi)父元素高度

• 瀏覽器兼容性好

同時(shí)注意：

• 需要額外的HTML標(biāo)簽

inline-block法

迫切需要的方法：inline-block法居中?；痉椒ㄊ鞘褂?nbsp;display: inline-block, vertical-align: middle樣式和偽元素讓內(nèi)容塊在容器中居中。我的實(shí)現(xiàn)用到了幾個(gè)在其他地方見(jiàn)不到的新技巧解決了一些問(wèn)題。

內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度。就像一段帶有長(zhǎng)文本的區(qū)域。不然，內(nèi)容區(qū)域會(huì)被推到頂端，這就是使用:after偽類的原因。使用:before偽類則會(huì)讓元素有100%的大小！

如果內(nèi)容塊需要盡可能大地占用水平空間，可以為大容器加上max-width: 99%;樣式，或者考慮瀏覽器和容器寬度的情況下使用max-width: calc(100% – 0.25em) 樣式。

這種方法和table-cell的大多數(shù)好處相同，不過(guò)最初我放棄了這個(gè)方法，因?yàn)樗袷莌ack。不管這一點(diǎn)的話，瀏覽器支持很不錯(cuò)，而且也被證實(shí)是很流行的方法。

HTML:

<div class="Center-Container is-Inline">   <div class="Center-Block">     <!-- CONTENT -->   </div> </div>

CSS：

.Center-Container.is-Inline {   text-align: center;   overflow: auto; }   .Center-Container.is-Inline:after, .is-Inline .Center-Block {   display: inline-block;   vertical-align: middle; }   .Center-Container.is-Inline:after {   content: '';   height: 100%;   margin-left: -0.25em; /* To offset spacing. May vary by font */ }   .is-Inline .Center-Block {   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */   /* max-width: calc(100% - 0.25em) /* Only for IE9+ */

好處：

• 內(nèi)容高度可變

• 內(nèi)容溢出則能自動(dòng)撐開(kāi)父元素高度

• 瀏覽器兼容性好，甚至可以調(diào)整支持IE7

同時(shí)注意：

• 需要額外容器

• 依賴于margin-left: -0.25em的樣式，做到水平居中，需要為不同的字體大小作調(diào)整

• 內(nèi)容區(qū)聲明的寬度不能大于容器的100% 減去0.25em的寬度

Flexbox法

CSS未來(lái)發(fā)展的方向就是采用Flexbox這種設(shè)計(jì)，解決像垂直居中這種共同的問(wèn)題。請(qǐng)注意，F(xiàn)lexbox有不止一種辦法居中，他也可以用來(lái)分欄，并解決奇奇怪怪的布局問(wèn)題。

.Center-Container.is-Flexbox {   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   -webkit-box-align: center;      -moz-box-align: center;      -ms-flex-align: center;   -webkit-align-items: center;           align-items: center;   -webkit-box-pack: center;      -moz-box-pack: center;      -ms-flex-pack: center;   -webkit-justify-content: center;           justify-content: center; }

好處：

• 內(nèi)容可以是任意高寬，溢出也能表現(xiàn)良好

• 可以用于各種高級(jí)布局技巧

同時(shí)注意： 不支持IE8-9

• 需要在body上寫(xiě)樣式，或者需要額外容器

• 需要各種廠商前綴兼容現(xiàn)代瀏覽器

• 可能有潛在的性能問(wèn)題

***的建議

各項(xiàng)技術(shù)都有各自的好處，采取什么樣的方法，取決于你所支持的瀏覽器，以及現(xiàn)有標(biāo)簽的結(jié)構(gòu)。請(qǐng)使用上面提供對(duì)照表幫你選出***你需要的方法。

“完全居中”法簡(jiǎn)單方便，迅速及時(shí)。以前使用負(fù)Margin值的地方，都可以使用Absolute居中。無(wú)需繁瑣的數(shù)學(xué)計(jì)算，無(wú)需額外標(biāo)簽，而且可以隨時(shí)改變大小。

如果網(wǎng)站需要可變高度的內(nèi)容，而且同時(shí)照顧到瀏覽器兼容性的話，可以嘗試table-cell和inline-block技術(shù)，如果想嘗試新鮮事物的話，可以使用Flexbox，并享受這種高級(jí)技術(shù)帶來(lái)的好處。

到此，關(guān)于“CSS如何做到完全居中”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！