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

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

position : absolute;

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

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

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

     

         我是絕對定位

          我在垂直居中
         
 歐耶
         

     
 

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

頁面呈現(xiàn)樣式

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

缺點：沒有顯式設(shè)置overflow時，內(nèi)容超過元素高度時會溢出，沒有滾動條；

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

CSS樣式

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

頁面呈現(xiàn)樣式

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

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

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

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

    

    

        我是絕對定位
        
 我在垂直居中
        
 歐耶
        

    

CSS樣式

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

頁面呈現(xiàn)樣式

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

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

關(guān)于display:table-cell應(yīng)用，張鑫旭前輩寫過一篇博文我所知道的幾種display:table-cell的應(yīng)用；我就不詳細(xì)講述。

display:table此元素會作為塊級表格來顯示 類似

table標(biāo)簽

，表格前后帶有換行符。

display:table-cell 此元素會作為一個表格單元格顯示 類似

td 和 th標(biāo)簽

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

1.HTML

     

         我是絕對定位

          我在垂直居中
         
 歐耶
         

     
 

2.CSS樣式

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

3.頁面呈現(xiàn)

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

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

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

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

1.HTML

    

        我是line-height
    

2.CSS樣式

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

3.頁面呈現(xiàn)

優(yōu)點：適用于所有瀏覽器 無足夠空間時不會被截斷；

缺點：只對文本有效(塊級元素?zé)o效) 多行時，斷詞比較糟糕；

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

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

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.頁面呈現(xiàn)

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

缺點：會加上額外標(biāo)記；

與CSS方法的絕對定位相似，不過具體的定位方式是在js中寫出，便于維護。

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.頁面呈現(xiàn)

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

Flex 布局教程：語法篇；

Flex 布局教程：實例篇；

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

糖伴西紅柿的博文；
木的樹的博文;
阮一峰老師的博客；
張鑫旭老師的博客;
等等。