(1)單行文字/行內元素/行內塊級元素

原理：line-height的最終表現是通過inline box實現的，而無論inline box所佔據的高度是多少（無論比文字大還是比文字小），其佔據的空間都是與文字內容公用水平中垂線的。

#parent{
    height: 150px;
    line-height: 150px;  /*與height等值*/
}

優缺點：

• 優點：簡單；相容性好
• 缺點：只能用於單行行內內容；要知道高度的值

(2)多行文字/行內元素/行內塊級元素

原理同上

#parent{  /*或者用span把所有文字包裹起來，設定display：inline-block轉換成圖片的方式解決*/
    height: 150px;
    line-height: 30px;  /*元素在頁面呈現為5行,則line-height的值為height/5*/
}
 

優缺點：

• 優點：簡單；相容性好
• 缺點：只能用於行內內容；需要知道高度和最終呈現多少行來計算出line-height的值，建議用span包裹多行文字

(3)圖片

原理：vertical-align和line-height的關係

#parent{
    height: 150px;
    line-height: 150px;
    font-size: 0;
}
img#son{vertical-align: middle;} /*預設是基線對齊，改為middle*/

優缺點：

• 優點：簡單；相容性好
• 缺點：需要新增font-size: 0; 才可以完全的垂直居中；不過需要主要，html#parent包裹img之間需要有換行或空格

(4)單個塊級元素

html程式碼:

<div id="parent">
    <div id="son"></div>
</div>

(4-1) 使用tabel-cell實現:

原理：CSS Table，使表格內容對齊方式為middle

#parent{
    display: table-cell;
    vertical-align: middle;
}

優缺點：

• 優點：簡單；寬高不定；相容性好（ie8+）
• 缺點：設定tabl-cell的元素，寬度和高度的值設定百分比無效，需要給它的父元素設定display: table; 才生效；table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height；設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢位時會自動撐開父元素

(4-2) 使用絕對定位實現:

/*原理：子絕父相，top、right、bottom、left的值是相對於父元素尺寸的，然後margin或者transform是相對於自身尺寸的，組合使用達到水平居中的目的*/
#parent{
    height: 150px;
    position: relative;  /*父相*/
}
#son{
    position: absolute;  /*子絕*/
    top: 50%;  /*父元素高度一半,這裡等同於top:75px;*/
    transform: translateY(-50%);  /*自身高度一半,這裡等同於margin-top:-25px;*/
    height: 50px;
}

/*優缺點
- 優點：使用margin-top相容性好；不管是塊級還是行內元素都可以實現
- 缺點：程式碼較多；脫離文件流；使用margin-top需要知道高度值；使用transform相容性不好（ie9+）*/

或

/*原理：當top、bottom為0時,margin-top&bottom會無限延伸佔滿空間並且平分*/
#parent{position: relative;}
#son{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

/*優缺點
- 優點：簡單;相容性較好(ie8+)
- 缺點：脫離文件流*/

(4-3) 使用flex實現:

原理：flex設定對齊方式罷了，請查閱文末flex閱讀推薦

#parent{
    display: flex;
    align-items: center;
}

或

#parent{display: flex;}
#son{align-self: center;}

或
/*原理：這個尚未搞清楚，應該是flex使margin上下邊界無限延伸至剩餘空間並平分了*/
#parent{display: flex;}
#son{margin: auto 0;}

優缺點：

• 優點：簡單靈活；功能強大
• 缺點：PC端相容性不好，移動端（Android4.0+）

(5)任意個元素(flex)

原理同上

#parent{
    display: flex;
    align-items: center;
}

或

#parent{
    display: flex;
}
.son{
    align-self: center;
}

或 

#parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

優缺點：

• 優點：簡單靈活；功能強大
• 缺點：PC端相容性不好，移動端（Android4.0+）

本章小結：

• 對於垂直居中，最先想到的應該就是 line-height 了，但是這個只能用於行內內容；
• 其次就是考慮能不能用vertical-align: middle; ，不過這個一定要熟知原理才能用得順手，建議看下vertical-align和line-height的基友關係 ；
• 然後便是絕對定位，雖然程式碼多了點，但是勝在適用於不同情況；
• 移動端相容性允許的情況下能用flex就用flex