居中效果在css中很是普通的效果，平時大家所看到的居中效果主要分為三大類：水平居中、垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。早期總結了一下網際網路上有關於水平垂直居中的幾種實現方案，比如說《css製作水平垂直居中對齊》中介紹了八中實現水平垂直的方案，而在《css製作水平垂直居中》一文介紹了四種實現垂直居中的方案，並且在《css3實現水平垂直居中》使用了css3的flexbox的屬性輕鬆實現多行文字水平垂直居中的方法。當然大家有可能認為這些方法對於瀏覽嘎嘎的相容性處理太煩了，也有人使用jquery的方法實現水平垂直居中效果，比如在《jquery製作元素在螢幕中水平垂直居中效果》中介紹的。
.center
為了更好的說明問題，我們來看乙個製作分頁效果的**：
html
給分頁加上樣式：
.pagination li
.pagination a
.pagination a:hover
這很顯然不是我們需要的效果，接下來我們分幾種方案來製作：
一、margin和width實現水平居中
.pagination
.pagination li
.pagination a
.pagination a:hover
效果是讓我們實現了，但其擴充套件性那就不一定強了。示例中只顯示了五頁和向前向後的七個顯項，但往往我們很多情況下是不知道會有多少個分頁項顯示出來，而且也無法確定每個分頁選項的寬度是多少，也就無法確認容器的寬度。
**優點：**實現方法簡單易懂，瀏覽器相容性強；
**缺點：**擴充套件性差，無法自適應未知項情況。
二、inline-block實現水平居中方法
這個方法早期在《如何解決inline-block元素的空白間距》和《css3製作的分頁導航》中都有涉及到，但未單獨提取出來。此次，將這種方法拿出來說。
僅inline-block屬性是無法讓元素水平居中，他的關鍵之處要在元素的父容器中設定text-align的屬性為「center」，這樣才能達到效果：
.pagination
.pagination li
.pagination a
.pagination a:hover
這個方法相對來說也是簡單易懂，但使用了inline-block解決了水平居中的問題，卻又產生了乙個新的問題，就是分頁項與分頁項由回車符帶來的空白間距，那麼不知情的同學就會不知道如何解決？（而且這個間距並不是所有瀏覽器都有），所以需要解決下inline-block帶來的間距，詳細的解決方法可以閱讀《如何解決inline-block元素的空白間距》一文。
**做點：**簡單易懂，擴充套件性強；
**缺點：**需要額外處理inline-block的瀏覽器相容性。
三、浮動實現水平居中的方法
剛看到標題，大家可能會感到很意外，元素都浮動了，他還能水平居中？大家都知道，浮動要麼靠左、要麼靠右，還真少見有居中的。其實略加處理就有了。
.pagination
.pagination ul
.pagination li
.pagination a
.pagination a:hover
這種方法實現和前面的與眾不同，使用了浮動配合position定位實現。下面簡單的介紹了一下這種方法實現原理，詳細的可以閱讀matthew james taylor寫的《horizontally centered menus with no css hacks》一文。
如果div設定了浮動之後，他的內容有多寬度就會撐開有多大的容器（除顯式設定元素寬度值之外），這也是我們實現讓分頁導航居中的關鍵所在：
接下來使用傳統的製作方法，我們會讓導航浮動到左邊，而且每個分頁項也進行浮動，就如下圖所示一樣：
現在要想的辦法是讓分頁導航居中的效果了，在這裡是通過「position:relative」屬性實現，首先在列表項「ul」上向右移動50%（left:50%;），看到如下圖所示：
如上圖所示一樣，整個分頁向右移動了50%的距離，緊接著我們在「li」上也定義「position:relative」屬性，但其移動的方向和列表「ul」移動的方向剛好是反方向，而其移動的值保持一致：
這樣一來就實現了float浮動居中的效果。
**特別宣告：**方法三思想**於matthew james taylor寫的《horizontally centered menus with no css hacks》一文，並且引用其文中演示的示意圖。
**優點：**相容性強，擴充套件性強；
**缺點：**實現原理較複雜。
四、絕對定位實現水平居中
.ele.pagination
.pagination ul
.pagination li
.pagination a
.pagination a:hover
**優點：**擴充套件性強，相容性強;
**缺點：**理解性難。
五、css3的flex實現水平居中方法
css3的flex是乙個很強大的功能，她能讓我們的布局變得更加靈活與方便，唯一的就是目前瀏覽器的相容性較差。那麼第五種方法，我們就使用flex來實現，其實這種方法早在《css3實現水平垂直居中》一文有介紹，我們把水平居中的部分**取出來：
.pagination
.pagination li
.pagination a
.pagination a:hover
**優點：**實現便捷，擴充套件性強
**缺點：**相容性差。
六、css3的fit-content實現水平居中方法
今天看《horizontal centering using css fit-content value》一文，讓我體驗了一下"fit-content"製作水平居中的方法。我也將這種方法收進來。
「fit-content」是css中給「width」屬性新加的乙個屬性值，他配合margin可以讓我輕鬆的實現水平居中的效果：
.pagination ul
.pagination li
.pagination a
.pagination a:hover
**優點：**簡單易懂，擴充套件性強;
**缺點：**瀏覽器相容性差
原文:
水平居中的六種方式
用css樣式來讓或者盒子居中顯示 效果圖 1.通過margin 0 auto text align center實現css水平居中。parent child 2.通過display flex實現css水平居中 parent child 3.通過display table cell和margin le...
div水平垂直居中的六種方法
方法一 絕對定位方法 不確定當前div的寬度和高度，採用 transform translate 50 50 當前div的父級新增相對定位 position relative 如下 div 方法二 絕對定位方法 確定了當前div的寬度，margin值為當前div寬度一半的負值 如下 div 方法三 ...
inline block實現元素水平居中
僅inline block屬性是無法讓元素水平居中，他的關鍵之處要在元素的父容器中設定text align的屬性為 center lang en charset utf 8 documenttitle type text css ul ulli style head item1li item2li ...