摘要：垂直居中相關(guān)知識(shí)總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在上提問(wèn)了個(gè)問(wèn)題關(guān)于垂直居中，大家有沒(méi)有什么比較好的建議。

工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在SF上提問(wèn)了個(gè)問(wèn)題CSS關(guān)于垂直居中，大家有沒(méi)有什么比較好的建議。非常感謝各位前輩對(duì)我的幫助，前輩們給的答案都非常多也各式各樣，我覺(jué)得有必要把大家的回答總結(jié)一下。

position : absolute;

將被賦予此定位方法的對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒(méi)有設(shè)置定位屬性，即還是遵循HTML定位規(guī)則的，則依據(jù) body 對(duì)象左上角作為參考進(jìn)行定位。絕對(duì)定位對(duì)象可層疊，層疊順序可通過(guò) z-index 屬性控制，z-index值為無(wú)單位的整數(shù)，大的在最上面，可以有負(fù)值。

使用絕對(duì)定位要求元素必須設(shè)置明確高度。內(nèi)容超過(guò)元素高度時(shí)需要設(shè)置overflow決定滾動(dòng)條的出現(xiàn)

HTML結(jié)構(gòu)

     

         我是絕對(duì)定位

          我在垂直居中
         
 歐耶
         

     
 

CSS樣式

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #f0f0f0;
    /*IE不支持resize*/
    resize: both;
    overflow: auto;
}

頁(yè)面呈現(xiàn)樣式

優(yōu)點(diǎn)：支持響應(yīng)式，只有這種方法在resize后仍然居中；

缺點(diǎn)：沒(méi)有顯式設(shè)置overflow時(shí)，內(nèi)容超過(guò)元素高度時(shí)會(huì)溢出，沒(méi)有滾動(dòng)條；

已知元素高度后，使用絕對(duì)定位將top設(shè)置為50%，mergin-top設(shè)置為內(nèi)容高度的一半(height + padding) / 2；內(nèi)容超過(guò)元素高度時(shí)需要設(shè)置overflow決定滾動(dòng)條的出現(xiàn)；top：50%元素上邊界位于包含框中點(diǎn)，設(shè)置負(fù)外邊界使得元素垂直中心與包含框中心重合；

CSS樣式

.absolute-center {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -50px;
    background: #f0f0f0;
}

頁(yè)面呈現(xiàn)樣式

優(yōu)點(diǎn)：代碼量少、適用于所有瀏覽器、不需要嵌套標(biāo)簽；

缺點(diǎn)：不支持響應(yīng)式(不能使用百分比、min/max-width)；

在需要居中的元素外插入一個(gè)div，設(shè)置外div的height為50%，margin-bottom為內(nèi)部元素的一半（height+padding）/2。內(nèi)容超過(guò)元素高度時(shí)需要設(shè)置overflow決定滾動(dòng)條的出現(xiàn)。

HTML結(jié)構(gòu)

    

    

        我是絕對(duì)定位
        
 我在垂直居中
        
 歐耶
        

    

CSS樣式

.outer {
    height: 50%;
    margin-bottom: -50px;
}
.inner {
    margin: auto;
    height: 100px;
    width: 100px;
    background-color: #f0f0f0;
}

頁(yè)面呈現(xiàn)樣式

優(yōu)點(diǎn)：瀏覽器兼容性好，支持舊版本ie；

缺點(diǎn)：需要額外元素、不支持響應(yīng)式；

關(guān)于display:table-cell應(yīng)用，張?chǎng)涡袂拜厡戇^(guò)一篇博文我所知道的幾種display:table-cell的應(yīng)用；我就不詳細(xì)講述。

display:table此元素會(huì)作為塊級(jí)表格來(lái)顯示 類似

table標(biāo)簽

，表格前后帶有換行符。

display:table-cell 此元素會(huì)作為一個(gè)表格單元格顯示 類似

td 和 th標(biāo)簽

利用表布局特點(diǎn)，vertical-align設(shè)置為Middle后，單元格中內(nèi)容中間與所在行中間對(duì)齊。

1.HTML

     

         我是絕對(duì)定位

          我在垂直居中
         
 歐耶
         

     
 

2.CSS樣式

.container{
    display: table;
    height: 200px;
    width: 100px;
    background: #f0f0f0;
}
.absolute-center{
    /*將cell垂直居中，如果外層div不為table則tablecell必須有高度*/
    display: table-cell;
    vertical-align: middle;
}

3.頁(yè)面呈現(xiàn)

優(yōu)點(diǎn)：支持任意內(nèi)容的可變高度、支持響應(yīng)式；

缺點(diǎn)：每一個(gè)需要垂直居中的元素都會(huì)需要加上額外標(biāo)簽（需要table、table-cell兩個(gè)額外元素）；

該方式只適用于情況比較簡(jiǎn)單的單行文本，只需要簡(jiǎn)單地把 line-height 設(shè)置為那個(gè)對(duì)象的 height 值就可以使文本居中了。這種方法在小元素上非常有用，例如使按鈕文本或者單行文本居中。

如果line-height高度大于font-size，生于高度瀏覽器會(huì)平分到文字上下兩端。

1.HTML

    

        我是line-height
    

2.CSS樣式

        .container {
            width: 200px;
            height: 100px;
            line-height: 100px;
            background-color:#f0f0f0;
        }

3.頁(yè)面呈現(xiàn)

優(yōu)點(diǎn)：適用于所有瀏覽器 無(wú)足夠空間時(shí)不會(huì)被截?cái)啵?/p>

缺點(diǎn)：只對(duì)文本有效(塊級(jí)元素?zé)o效) 多行時(shí)，斷詞比較糟糕；

將center元素display設(shè)置為inline-block，vertical-align設(shè)置為middle，為包含框設(shè)置after偽元素，將偽元素display設(shè)置為inline-block,vercial-align設(shè)置為middle，同時(shí)設(shè)置height為100%，撐開容器。

為同一行的inline-block元素設(shè)置vertical-align：middle，該行內(nèi)的inline-block元素會(huì)按照元素的垂直中心線對(duì)齊。

1.HTML

    

        

            我是inline-block
            
 我在垂直居中
            
 歐耶
            

        
    

2.CSS樣式

        .outer {
            display: block;
        }       
        .outer:after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }    
        .inner {
            background-color: #f0f0f0;
            display: inline-block;
            vertical-align: middle;
        }

3.頁(yè)面呈現(xiàn)

優(yōu)點(diǎn)：支持響應(yīng)式、支持可變高度；

缺點(diǎn)：會(huì)加上額外標(biāo)記；

與CSS方法的絕對(duì)定位相似，不過(guò)具體的定位方式是在js中寫出，便于維護(hù)。

HTML結(jié)構(gòu)

    

        

            我是js居中
            
 我在垂直居中
            
 歐耶
            

        
    

CSS樣式

        #box-out {
            width: 200px;
            height: 200px;
        }
        #box {
            position: absolute;
            background-color: #f0f0f0;
            width: 100px;
            height: 100px;
        }

3.javascript

4.頁(yè)面呈現(xiàn)

真正的垂直居中布局，全都是優(yōu)點(diǎn)，缺點(diǎn)就是IE支持不佳...我覺(jué)得有些時(shí)候該放棄就可以放棄ie了 ：）。Flex阮一峰老師講的非常非常非常詳細(xì)，我就不多做介紹了，貼上阮一峰老師的博客

Flex 布局教程：語(yǔ)法篇；

Flex 布局教程：實(shí)例篇；

首先非常感謝回復(fù)我問(wèn)題的各位前輩。
目前尋找了這么八種常用的方法，基本囊括了所有的垂直居中的方法。

糖伴西紅柿的博文；
木的樹的博文;
阮一峰老師的博客；
張?chǎng)涡窭蠋煹牟┛?
等等。