本篇內(nèi)容介紹了“僅使用CSS怎么做到完全居中”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為城陽企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，城陽網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center {   

2.   margin: auto;   

3.   position: absolute;   

4.   top: 0; left: 0; bottombottom: 0; rightright: 0;   

5. }  

我并不是第一個(gè)發(fā)現(xiàn)這種方法的人（不過我還是敢把它叫做“完全居中”），它有可能是種非常普遍的技巧。但大多數(shù)介紹垂直居中的文章中并沒有提到過這種方法。

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

    跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）
    無特殊標(biāo)記，樣式更精簡
    自適應(yīng)布局，可以使用百分比和最大最小高寬等樣式
    居中時(shí)不考慮元素的padding值（也不需要使用box-sizing樣式）
    布局塊可以自由調(diào)節(jié)大小
    img的圖像也可以使用

同時(shí)注意：

    必須聲明元素高度
    推薦設(shè)置overflow:auto;樣式避免元素溢出，顯示不正常的問題
    這種方法在Windows Phone上不起作用

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

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

說明

在研究了規(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; 的元素會變成塊元素，并脫離普通文檔流。而文檔的其余部分照常渲染，元素像是不在原來的位置一樣。 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; 樣式的塊元素會讓瀏覽器為它包裹一層新的盒子，因此這個(gè)元素會填滿它相對父元素的內(nèi)部空間，這個(gè)相對父元素可以是是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è)置了寬高以后，瀏覽器會阻止元素填滿所有的空間，根據(jù)margin: auto; 的要求，重新計(jì)算，并包裹一層新的盒子。 Developer.mozilla.org The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然塊元素是絕對定位的，又脫離了普通文檔流，因此瀏覽器在包裹盒子之前會給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)兼容的各種瀏覽器中起作用。
　對齊
容器內(nèi)對齊

使用“完全居中”，就可以在一個(gè)設(shè)置了position: relative的容器中做到完全居中元素了！ （居中例子，請前往英文原文查看）

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Center-Container {   

2.   position: relative;   

3. }   

4.     

5. .Absolute-Center {   

6.   width: 50%;   

7.   height: 50%;   

8.   overflow: auto;   

9.   margin: auto;   

10.   position: absolute;   

11.   top: 0; left: 0; bottombottom: 0; rightright: 0;   

12. }  

接下來的示例會假設(shè)已經(jīng)包含了以下樣式，并且以逐步添加樣式的方式提供不同的特性。
　　在可視區(qū)域內(nèi)居中

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Fixed {   

2.   position: fixed;   

3.   z-index: 999;   

4. }  

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Fixed {   

2.   position: fixed;   

3.   z-index: 999;   

4. }  

帶響應(yīng)式

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Responsive {   

2.   width: 60%;    

3.   height: 60%;   

4.   min-width: 200px;   

5.   max-width: 400px;   

6.   padding: 40px;   

7. }  

帶溢出內(nèi)容

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Overflow {   

2.   overflow: auto;   

3. }  

.

　大小可調(diào)整

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Resizable {   

2.   min-width: 20%;   

3.   max-width: 80%;   

4.   min-height: 20%;   

5.   max-height: 80%;   

6.   resize: both;   

7.   overflow: auto;   

8. }  

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

使用注意：

    需要設(shè)置max-width/max-height給內(nèi)容區(qū)域留足夠的空間，不然就有可能使容器溢出。
    resize屬性不支持移動版瀏覽器和IE8-10，如果用戶體驗(yàn)很重要的話，請確保用戶可以有其他替代方法來改變大小。
    同時(shí)使用resize樣式和transition會使用戶在開始改變大小時(shí)產(chǎn)生等于transition效果時(shí)間等長的延時(shí)。

　　圖像

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

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

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

HTML:
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

CSS:
 

CSS Code復(fù)制內(nèi)容到剪貼板

1. .Absolute-Center.is-Image {   

2.   height: auto;   

3. }   

4.     

5. .Absolute-Center.is-Image img {    

6.   width: 100%;   

7.   height: auto;   

8. }  

　可變高度

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

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

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

    與大小可調(diào)整技術(shù)是不兼容的
    Firefox/IE8中使用display: table，內(nèi)容區(qū)在垂直方向靠上，水平方向仍然居中。
    IE9/10中使用display: table，內(nèi)容區(qū)會跑到左上角。
    移動版Safari中內(nèi)容區(qū)是水平對齊的，但是如果使用了百分比的寬度，水平方向上會稍稍偏離中心。

Javascript:
 

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. /* Modernizr Test for Variable Height Content */  

2. Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {   

3.   Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);   

4. });  

CSS:
 

CSS Code復(fù)制內(nèi)容到剪貼板

1. .absolutecentercontent .Absolute-Center.is-Variable {   

2.   display: table;   

3.   height: auto;   

4. }  

“僅使用CSS怎么做到完全居中”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！