本文參考文章《六種方式實作元素水準居中》
元素水準居中的方法，最常見的莫過于給元素一個顯式的寬度，然後加上margin的左右值為auto。這種方式給固定寬度的元素設定居中是最友善不過的。但是很多情況下，無法确定容器寬度，這裡我們讨論一下這些問題。
為了更好說明問題，我們看一個制作分頁效果的代碼：
html代碼：
<div class="pagination">
<ul>
<li>
<a href="#">Prev</a></li>
<li>
<a href="#">1</a></li>
<li>
<a href="#">2</a></li>
<li>
<a href="#">3</a></li>
<li>
<a href="#">4</a></li>
<li>
<a href="#">5</a></li>
<li>
<a href="#">Next</a></li>
</ul>
</div> css代碼：
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(to top,#434345,#2f3032);
text-decoration: none;
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(to top,#f48b03,#c87100);
}
li {
list-style: none;
} 效果：
這顯然不是我們想要的效果，接下來我們分幾種方案來實作水準居中。下面css代碼我們隻貼出關鍵代碼。
1.margin和width實作水準居中
第一種方式是最古老的實作方案，也是最常見的，在分頁容器上定義一個寬度，然後配合margin的左右值為“auto”實作效果。
.pagination li {
line-height: 25px;
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}
/*!*給容器一個寬度*!*/
.pagination {
width: 500px;
margin-left: auto; /**/
margin-right: auto;
} 
效果是實作了，但是擴充性不一定強。這種方式顯示了5個分頁和首頁，末頁共7個顯示項，往往我們無法知道到底要顯示多少個分頁項，無法确定每個分頁項的寬度是多少，也就無法确定容器的寬度。
缺點：這種方法簡單易懂，浏覽器相容性強，但是擴充性差，需要确定容器寬度，無法自适應未知情況。
2.inline-block實作水準居中
這種方式使用inline-block和text-align:center結合起來實作水準居中。父标簽設定text-align:center，文本居中，子元件設定display:inline-block，行内元素。
.pagination{
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
} 這種方法相對來說簡單，但是使用inline-block實作了水準居中的問題，卻又産生了一個新的問題，就是分頁項之間的回車符帶來的空白間距，這個間距也不是所有浏覽器都會有，是以要解決下inline-block帶來的間距，詳細解決方法參考《如何解決inline-block元素的空白間距》
缺點：這種方法簡單易懂，擴充性強，但是需要額外處理自組建中inline-block的空白間距。
3.浮動實作水準居中
float浮動要麼考左，要麼靠右，沒有居中選項，其實隻要略加處理就可以了。總體來說就是容器寬度100%，向右浮動50%，子元素向左浮動50%，并且都相對定位。
.pagination {
float: left; /*分頁容器浮動到左邊*/
width: 100%; /*分頁容器寬度為100%*/
overflow: hidden;
position: relative; /*相對正常位置定位*/
}
.pagination ul {
clear: left;
float: left; /*内部容器浮動到左邊*/
position: relative; /*相對正常位置定位*/
left: 50%; /* 整個内部容器向右邊移動寬度的50% */
text-align: center;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: block;
float: left; /*每個分頁也浮動到左邊*/
position: relative; /*相對正常位置定位*/
right: 50%; /* 每個分頁項向左移動寬度的50% */
} 這種方法和前面的都不同，使用浮動float配合position:relative相對自身定位來實作，下面的文章介紹了這種方法的實作原理《Horizontally Centered Menus with no CSS hacks》
div是一個塊元素，其預設寬度是100%，如圖所示：
如果給div設定了浮動之後，他的内容有多寬就會撐開多大的容器（除顯式設定元素寬度值之外），這也是讓分頁導航居中的關鍵：
接下來使用傳統的制作方法，讓導航浮動到左邊，而且每個分頁也進行浮動
現在要想的辦法是讓分頁導航居中的效果，這裡是通過“position:relative”屬性實作，首先在清單項ul上向右移動50%（left:50%），如下圖：
如上圖一樣整個分頁容器向右移動了50%的距離，接着我們在“li”上也定義“position:relative”屬性，但其移動方向和清單“ul”移動方向剛好相反，而且移動值保持一緻，也是50%：
這樣就實作了float浮動居中的效果。
缺點：這種方式實作的相容性強，擴充性強，但是實作原理比較複雜。
4.絕對定位實作水準居中
絕對定位實作水準居中，元素絕對定位：“position:absolute;”，向右移動50%：“left:50%;” ,設定固定寬度：“width:寬度值;”，設定左外邊距為寬度值的一半：“margin-left:-(寬度值/2);”，代碼如下：
.ele {
position: absolute;
width: 寬度值;
left: 50%;
margin-left: -(寬度值/2);
} 但是這種做法有一個缺點，大多數情況下我們不知道元素的寬度，或者元素寬度是不固定的，但是我們可以在第三種方法的基礎上做一點變通：容器絕對定位，左偏移50%，子元素相對定位，右浮動，右偏移50%
.pagination {
position: relative; /*div相對定位*/
}
.pagination ul {
position: absolute; /*分頁容器絕對定位*/
left: 50%; /*分頁容器向右移動50%*/
}
.pagination li {
line-height: 25px;
margin: 0 5px;
position: relative; /*分頁元素相對定位，注意這裡不是absolute*/
float: left; /*分頁元素浮動在右邊*/
right: 50%; /*分頁元素向左移動50%*/
} 缺點：這種方式擴充性強，相容性強，但是了解起來比較難。
5.css3的flex實作水準居中
css3的flex是一個很強大的功能，能讓布局變得靈活友善，唯一的缺點就是目前相容性差。父元素flux布局，box-pack：center，box-origt:center，橫向排列。
.pagination{
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: horizontal;
box-pack: center;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
} 缺點：這種方法實作起來比較便捷，擴充性強，但是相容性比較差。
6.css3的fit-content實作水準居中
這種實作居中的方法參考《Horizontal centering using CSS fit-content value》。“fit-content”是給css的“width”屬性增加一個with:fit-content，表示縮小到内容寬度，再配合margin:auto可以輕松的實作水準居中的效果。
.pagination ul {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content; /*給with屬性值設定為fit-content*/
margin: 0 auto;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
} 缺點：這種方式簡單易懂，擴充性強，缺點是相容性差。
作者：
Tyler Ning出處：http://www.cnblogs.com/tylerdonet/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，請微信聯系冬天裡的一把火