不定高垂直居中（核心程式碼）

1.display:table-cell + vertical-align:middle

父元素（.parent）設定display：table-cell 變成單元格，再設定vertical-align:middle （改屬性可以作用於inline inline-block table何table-cell 元素）
該佈局的優缺點：
優點：相容性比較好（雖然table-cell不支援IE6 7 但把結構改成table結構就相容了）。
缺點：未知。

2.sbsolute + transform

父元素設定position:relative 可使它做為參照物,子元素設定position:absolute top:50%,會使子元素向下多移動盒子的高度一半，再設定transform:translateY(-50%)看使盒子向上移動盒子的高度一半（transform：translateY(-50%)的百分比參照物是自己）。
該佈局的優缺點：
優點：absolute脫離文件流，不會影響到其他子元素。
缺點：transform屬於css3的內容，不支援IE6 7 8 版本，還要給不同瀏覽器加上不同字首。

3.display：flex + align-items：center

當只給父元素設定display：flex 時 就會變成如上圖， 因當父元素設定了這值時，items的align-items值預設是stretch(被拉伸適應容器)，當設定值為center，就如下圖（我們正需要的垂直居中）。

該佈局的優缺點：
優點： 只要在父元素上設定就行。
缺點：只支援高版本的瀏覽器。