1.text-align:center 塊狀元素，水平居中
2.margin:0 auto 水平居中 以外邊框爲參照物，上下外邊框距爲0，左右外邊框距瀏覽器會自動計算平分
3.line-height 垂直居中 通過設置行間距。line-height只適用於單行文本的元素，多行元素不適用。
4.float屬性+relative定位 給父元素設置float：left ,然後父元素整體向左移動50%（position:relative;left:50%），這時父元素要清除浮動（clear：both）,然後再給子元素整體向左移動50%(position:relative;left:-50%)
5.根據絕對定位absolute+margin實現水平居中 給父元素一個相對定位relative，利用絕對定位absolute，配合margin：auto自動計算外邊距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相對於相對應於relative的絕對定位absolute，需要定寬。relative只是爲了給子元素定位用的
***6.使用absolute絕對定位+translate 移動轉***換，實現水平垂直居中 使用百分比來絕對定位一個元素，並配合使用translate，將元素移動定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。
7.利用table佈局，默認垂直居中（vertical-align:middle） 如果不是table佈局的話可以：仿table（display：table-cell）,一樣使用vertical-align:middle實現居中對齊
8.flex佈局 父元素使用display：flex,設置其屬性justify-content.align-items都爲center(display: flex; justify-content: center; align-items: center),實現水平居中
9.flex佈局+margin 父元素使用flex佈局（display：flex）,子元素使用margin：auto
參考文獻：https://www.jianshu.com/p/7fe3d0aacb1a