已知盒子具體寬度（適用于居中浮動(dòng)元素）

給父元素相對(duì)定位,給子元素絕對(duì)定位left:50%;top:50%;margin-left:。margin-left:-(寬度度/2)。margin-top:-(高度/2)；

寬度和高度未知并不是說(shuō)盒子沒(méi)有寬度和高度，只是自己未知。

給父盒子相對(duì)定位,給子盒子設(shè)定絕對(duì)定位top、right、bottom、left全為0，此時(shí)當(dāng)設(shè)置絕對(duì)定位四個(gè)方向都為0時(shí)，瀏覽器不知道你所處的位置，這時(shí)設(shè)置margin:auto,應(yīng)驗(yàn)起到作用，但這個(gè)方法不到萬(wàn)不得已時(shí)，不要使用

彈性布局（flex布局）

為父級(jí)元素開(kāi)啟fllex布局display:flex;

justify-content:center;//定義多根軸線的對(duì)齊方式（定義水平方向的位置）

align-items:center;//定義項(xiàng)目在交叉軸（垂直方向）的對(duì)齊方式

（不過(guò)這高大上的它，兼容性不好，不支持IE9及IE9以下）

平移（位移）

為父親開(kāi)啟相對(duì)定位position;relative;

為孩子開(kāi)啟絕對(duì)定位position:absolute;top:50%;left:50%;最后利用CSS3中的transform:translate(-50%,-50%);就可以將盒子居中了（不兼容IE8及IE8以下）

table方法

父容器設(shè)置為display:table，子元素（垂直居中顯示的元素）設(shè)置為display:table-cell。但是，這種方法不好，因?yàn)闀?huì)破壞整體的布局，畢竟表格布局能不使用就不使用，會(huì)破壞整體的布局，不利于后期維護(hù)

好啦，就分享到這里，關(guān)于這些方法的進(jìn)一步說(shuō)明和展示，不出問(wèn)題的話將會(huì)在19：00推送關(guān)于居中的詳細(xì)介紹，若你們有更好的方法記得關(guān)注我并在評(píng)論區(qū)留言：）