常見的幾種 CSS 水平垂直居中解決辦法

用CSS實現元素的水平居中，比較簡單，能夠設置text-align center，或者設置 margin-left:auto; margin-right:auto 之類的便可。

主要麻煩的地方仍是在垂直居中的處理上，因此接下來主要考慮垂直方向上的居中實現。

水平垂直居中主要包括三類：基本文本類，圖像類，其餘元素類

但，也是由一些方法能夠實現的，下面就來談談了解到的10中方法。

 

方法1、使用 line-height

這種方式更多地用在 單行文字的狀況,其中使用overflow:hidden的設置是爲了防止內容超出容器或者產生自動換行，這樣就達不到垂直居中效果了

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        
        background: #ddf;
    }
    .content { 
        line-height: 200px;
        text-align: center;
　　     overflow: hidden;
    }
</style>

<div class="box">
    <div class="content">
        This is text
    </div>
</div>

單行文字的狀況各瀏覽器都能兼容，多行文字就須要考慮其餘方法了。

但若是是圖片，IE6以上能夠正常居中，如下（包括IE6）則不兼容。

（若是想經過行高讓圖片在塊元素內垂直居中，ie6無效果，由於ie6中含有替換元素的行高會失效。）

 

2、使用 vertical-align

加上這個屬性，不過line-height也不能丟

若是不加上那個line-height的屬性的話，div會認爲你vertical-align的是默認高度，而不是自定義設置的高度。

.box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        line-height: 200px;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
    }

跟上述同樣，IE6的圖片仍是有問題

 

3、把容器看成表格單元

table能夠設置vertical-align，天然能實現居中，因此咱們能夠模擬出一個table

使用display:table和display:table-cell的方法，前者必須設置在父元素上，後者必須設置在子元素上，所以咱們要爲須要定位的文本再增長一個<div>元素：

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        display: table;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    
</style>

    <div class="box">
        <div class="content">
            This is test a b c d e f g h i j k a b c d e f g h i j k
        </div>
    </div>    

多行文本能居中了，但IE6卻仍是老樣子。圖片的居中也同理。

  

4、IE6下的解決方案

IE6這麼霸道..不過仍是能夠 以bug攻bug

在Internet Explorer 6及如下版本中，在高度的計算上存在着缺陷的。在Internet Explorer 6中對父元素進行定位後，若是再對子元素

進行百分比計算時，計算的基礎彷佛是有繼承性的（若是定位的數值是絕對數值沒有這個問題，可是使用百分比計算的基礎將再也不是該元素的

高度，而從父元素繼承來的定位高度）

好比這

<div id="wrap">  
 <div id="subwrap">  
   <div id="content">  
 </div>  
</div>
</div>
     

若是咱們對subwrap進行了絕對定位/相對定位，那麼content也會繼承了這個這個屬性，雖然它不會在頁面中立刻顯示出來，可是若是再對content進

行相對定位的時候，你使用的100%分比將再也不是content原有的高度。

例如，咱們設定了subwrap的position爲top:40%，咱們若是想使content的上邊緣和wrap重合的話就必須設置top:-80%;

那麼，若是咱們設定subwrap的top:50%的話，咱們必須使用-100%才能使content回到原來的位置上去，可是若是咱們把content設置成-50%呢？

那麼它就正好垂直居中了。因此咱們可使用這中方法來實現Internet Explorer 6中的垂直居中：

注意，要有三個層級才能夠~ 喜歡hack的話就直接兼容進去了

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        display: table;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        _position: relative;
        _top:50%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .content > div { 
        _position: relative;
        _top: -50%;
    }
</style>
    <div class="box">
        <div class="content">
            <div>This is test a b c d e f g h i j k a b c d e f g h i j k</div>
        </div>
    </div>

 

5、負邊距margin的使用

這個方法主要用於塊的居中，首先絕對定位到50% ，而後經過負邊距拉回來（元素高的一半，寬的一半）

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -60px; /* (width + padding)/2 */
        margin-top: -50px; /* (height + padding)/2 */
        padding: 10px;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>

    <div class="box">
        <div class="content">
            This is test 
        </div>
    </div>    

 

6、css3中transform的使用

其實這種方式給負邊距差很少，原理也是拉回來，不過由於css3的關係，IE8如下（包括IE8）還不支持

使用 transform: translate(-50%,-50%)拉回來

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top:50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        padding: 10px;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>

 

7、直接使用margin:auto

使用這個方式須要有一些知識 要了解

絕對定位元素不在普通內容流中渲染，所以margin:auto可使內容在經過top: 0; left: 0; bottom: 0;right: 0;設置的邊界內垂直居中。

優勢：

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

2.無需其餘特殊標記，CSS代碼量少

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

4.只用這一個類可實現任何內容塊居中

5.不管是否設置padding均可居中（在不使用box-sizing屬性的前提下）

6.內容塊能夠被重繪。

7.完美支持圖片居中。

缺點：

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

2.建議設置overflow:auto來防止內容越界溢出。（查看溢出Overflow）。

3.在Windows Phone設備上不起做用。

瀏覽器兼容性：

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

絕對定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測試經過。

對比表格：

絕對居中法並非惟一的實現方法，實現垂直居中還有些其餘的方法，並各有各的優點。採用哪一種技術取決於你的瀏覽器是否支持和你使用的語言標記。這個對照表有助於你根據本身的需求作出正確的選擇。
 

解釋：

絕對居中（AbsoluteCentering）的工做機理能夠闡述以下：

一、在普通內容流（normal content flow）中，margin:auto的效果等同於margin-top:0;margin-bottom:0。
W3C中寫道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.

2、position:absolute使絕對定位塊跳出了內容流，內容流中的其他部分渲染時絕對定位部分不進行渲染。

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

三、爲塊區域設置top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器從新分配一個邊界框，此時該塊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).

四、  給內容塊設置一個高度height或寬度width，可以防止內容塊佔據全部的可用空間，促使瀏覽器根據新的邊界框從新計算margin:auto

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

五、因爲內容塊被絕對定位，脫離了正常的內容流，瀏覽器會給margin-top,margin-bottom相同的值，使元素塊在先前定義的邊界內居中。
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

這麼看來， margin:auto彷佛生來就是爲絕對居中(Absolute Centering)設計的，因此絕對居中(Absolute Centering)應該都兼容符合標準的現代瀏覽器。

簡而言之（TL;DR）：絕對定位元素不在普通內容流中渲染，所以margin:auto可使內容在經過top: 0; left: 0; bottom: 0;right: 0;設置的邊界內垂直居中

View Code

這樣一來，就能夠直接居中了，不過IE6仍是不能兼容到

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        position: relative;
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 80px;
        background: #abc;
    }
</style>
    <div class="box">
        <div class="content">
            This is test 
        </div>
    </div>

8、上下padding相等的模擬

通常用於 父元素高度不肯定的文本、圖片等的垂直居中 

    .content { 
        padding-top: 25px;
        padding-bottom: 25px;
        background: #abc;
        text-align: center;
    }

　　<div class="content">
　　　　<p>This is test a b c d e f g h i j k a b c d e f g h i j k </p>
　　</div>

不過塊級元素就有點問題了，第二行開始就不會左右居中了

   

 

9、使用css3的Flex佈局

Flex佈局用法見 上文      flex對IE而言 IE10+ 才支持

好比我想讓box中那幾個div都水平垂直居中，只要簡單設置一下便可。

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        padding: 10px;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        justify-content: center;
        /* align-content: flex-start; */
        align-items: center;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .content { 
        width: 50px;
        height: 50px;
        border: 2px solid #adf;
        background: #abc;
    }

</style>

    <div class="box">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

獲得結果爲左圖，由於默認align-content是stretch已經徹底撐開了，若是想獲得右圖鏈接在一塊兒就 把上頭的 註釋取消便可

  

10、在 content 元素外插入一個 div

並設置此 div height:50%; margin-bottom: -(contentheight + padding)/2;。

好比content高度爲100px,總padding爲20px  ，則margin-bottom: -60px 將content擠下去

<style type="text/css">
    html,body,div {margin: 0;padding: 0}
    .box { 
        margin: 20px auto;
        width: 200px;
        height: 200px;
        background: #ddf;
    }
    .floater { 
        height: 50%;
        margin-bottom: -60px;
     }
    .content { 
        position: relative;
        margin: 0 auto;
        padding: 10px;
        width: 100px;
        height: 100px;
        border: 2px solid #adf;
        background: #abc;
    }

</style>

    <div class="box">
        <div class="floater"></div>
        <div class="content"></div>
    </div>

缺點就是增長了無心義的標籤，但優勢是簡便並且IE6也獲得兼容

 

固然，還有不少方法能夠實現水平垂直居中，見到了再添加吧。