css的居中，可以分為水平居中和垂直居中，實現(xiàn)居中的方式有以下幾種：
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.根據(jù)絕對定位absolute+margin實現(xiàn)水平居中? ? 給父元素一個相對定位relative，利用絕對定位absolute，配合margin：auto自動計算外邊距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相對于相對應于relative的絕對定位absolute，需要定寬。relative只是為了給子元素定位用的
6.使用absolute絕對定位+translate 移動轉換，實現(xiàn)水平垂直居中? ? ?使用百分比來絕對定位一個元素，并配合使用translate，將元素移動定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。
7.利用table布局，默認垂直居中（vertical-align:middle） 如果不是table布局的話可以：仿table（display：table-cell）,一樣使用vertical-align:middle實現(xiàn)居中對齊
8.flex布局? ?父元素使用display：flex,設置其屬性justify-content.align-items都為center(display: flex; justify-content: center; align-items: center),實現(xiàn)水平居中
9.flex布局+margin? ? 父元素使用flex布局（display：flex）,子元素使用margin：auto
下面來聊聊遇到的問題，相對來說有些棘手，第一次遇到。涉及到css3.0盒模型display:-webkit-box;的使用：
要實現(xiàn)div中值水平居中
子容器樣式中已經給了text-align:center
1.使用margin:0 auto讓其居中是無效的
2.使用flex布局（justify-content: center; align-items: center）也沒有實現(xiàn)其居中的效果
3.之后又試了：box-align：center(box-align表示父容器中子容器的垂直對齊方式)，這個其實是用錯了，寫出來只是想讓大家知道，了解一下
最后，使用了box-pack：center（box-pack表示父容器里面子容器的水平對齊方式）
但是：唯一遺憾的是，box-pack在firefox與opera暫時不支持，只有safari、chrome支持
