概述
我們平時(shí)看到的居中效果主要分為三大類，水平居中，垂直居中和水平垂直居中，在這里總結(jié)以下元素水平居中的方法。
一 定寬自動邊距
.center {
width:40px;
margin-left: auto;
margin-right: auto;
}
注意元素一定要定寬
優(yōu)點(diǎn)：方法簡單易懂，瀏覽器兼容性強(qiáng)
缺點(diǎn)：擴(kuò)展性差，無法自適應(yīng)未知項(xiàng)的其他情況。
二 inline-block實(shí)現(xiàn)水平居中方法
僅僅inline-block 是無法實(shí)現(xiàn)水平居中的，還需要再父元素
中設(shè)置text-align: center 才能實(shí)現(xiàn)居中效果。
.pagination {
text-align: center;
}
.pagination li {
margin: 0 5px;
display: inline-block;
}
優(yōu)點(diǎn)：簡單易懂， 擴(kuò)張強(qiáng)
缺點(diǎn)：需要額外處理inline-block的瀏覽器兼容性問題，如在某些瀏覽器中出額外出現(xiàn)的空格。
三 浮動實(shí)現(xiàn)水平居中的方法
原理是使用浮動配合position定位實(shí)現(xiàn)，詳細(xì)的可以參考Horizontally Centered Menus with no CSS hacks
一 首先是沒有浮動的div div是一個(gè)塊元素， 其默認(rèn)的寬度為100%,如下圖所示：
如果div設(shè)置了浮動，那么他的內(nèi)容設(shè)置了多大的寬度就會撐開多大的容器（除顯式的設(shè)置寬度外）
下面以分頁導(dǎo)航欄為例，先讓導(dǎo)航欄浮動到左邊，其他分頁項(xiàng)也進(jìn)行浮動,如下圖所示
接下來運(yùn)用position:relative；屬性，使ul元素相對于父元素定位，讓其向右移動50%(left: 50%)，如下圖所示
同理，下面對li元素也運(yùn)用position：relative 屬性，使li元素相對于父元素ul定位，使其向左移動 50%(right:50%),效果如下圖所示：
浮動居中就成功實(shí)現(xiàn)了。
優(yōu)點(diǎn)：兼容性強(qiáng)，擴(kuò)展性強(qiáng)
缺點(diǎn)：實(shí)現(xiàn)原理較為復(fù)雜
四 絕對定位實(shí)現(xiàn)水平居中
原理和方法四很相似，不過是改用絕對定位來實(shí)現(xiàn)，下面使相關(guān)的代碼
.element {
position: absolute;
width: 寬度值;
margin-left: -(寬度值/2);
}
優(yōu)點(diǎn)：兼容性強(qiáng)，擴(kuò)展性強(qiáng)
缺點(diǎn)：實(shí)現(xiàn)原理較為復(fù)雜
五 CSS3的flex實(shí)現(xiàn)水平居中的方法
CSS的flex屬性可以讓我們的布局更加靈活和簡單，但瀏覽器的兼容性較差
代碼如下
.element {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizonta;
box-pack: center;
}
優(yōu)點(diǎn)：實(shí)現(xiàn)便捷，可擴(kuò)展性強(qiáng)
缺點(diǎn)： 兼容性差
