1絕對定位垂直居中
css部分
html
效果圖
不定長的絕對定位居中冕房，原理比較簡單，首先將top,left各偏移百分之50抛计，這時候左上角的頂點是垂直水平居中的蹋辅，再用css3的屬性transform：translate(X，Y)相對于自身向相反方向各平移百分之五十窗宇，就可以實現垂直居中了
2.flex布局實現垂直居中
flex是css新屬性证芭，非常好用，兼容性問題也在逐步解決担映，可以一試
css
html
image.png
justify-content: center;主軸居中
align-items: center;次軸居中
想詳細了解flex的可以看阮一峰老師的講解
3.table-cell垂直居中
css
效果圖
簡單實用，兼容性好
4.inline-block配合偽元素垂直居中
css
效果圖
偽元素是在所使用它的元素內部的最后加入叫潦，如開始的代碼中就是在.parent:after會在div.parent容器的最后（即div.son后面）加上一個高度為100%寬度為0的元素蝇完，原理是同一個容器中的兩個inline-block元素設置vertical-align：middle實現的居中對齊，缺點是div.son寬度100%時矗蕊，無法垂直居中短蜕，只能將div.son的寬度縮小一點，用calc()或者設置max-width：99%
