不定高垂直居中（核心代碼）
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，就如下圖（我們正需要的垂直居中）。
該布局的優缺點：
優點： 隻要在父元素上設定就行。
缺點：隻支援高版本的浏覽器。