本文是面試匯總分支——怎樣讓一個元素水平垂直居中。
居中效果在CSS中很是普通的效果，平時大家所看到的居中效果主要分為三大類：水平居中、垂直居中和水平垂直居中。而其中水平居中相對於后兩者來說要簡單得多。早期總結了一下互聯網上有關於水平垂直居中的幾種實現方案，比如說《CSS制作水平垂直居中對齊》中介紹了八中實現水平垂直的方案，而在《CSS制作圖片水平垂直居中》一文介紹了四種實現圖片垂直居中的方案，並且在《CSS3實現水平垂直居中》使用了css3的flexbox的屬性輕松實現多行文本水平垂直居中的方法。當然大家有可能認為這些方法對於瀏覽嘎嘎的兼容性處理太煩了，也有人使用jQuery的方法實現水平垂直居中效果，比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介紹的。
回到我們今天的話題，水平居中的實現方案，大家最熟悉的莫過開給元素定一個顯示式的寬度，然后加上margin的左右值為auto。如：
.center { width: 960px; margin-left: auto; margin-right: 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> </di>
給分頁加上樣式：
.pagination li { line-height: 25px; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
這是一個極普通的樣式代碼，初步的效果：
這很顯然不是我們需要的效果，接下來我們分幾種方案來制作：
一、margin和width實現水平居中
第一種方法是最古老的實現方案，也是大家最常見的方案，在分頁容器上定義一個寬度，然后配合margin的左右值為“auto”實現效果：
.pagination { width: 293px; margin-left: auto; margin-right: auto; } .pagination li { line-height: 25px; display: inline; float: left; margin: 0 5px; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
代碼中綠色部分是為了實現分頁居中效果而添加的代碼。（下文中沒有特殊聲明，綠色部分代碼表示新增加的代碼。），先來看看效果：
效果是讓我們實現了，但其擴展性那就不一定強了。示例中只顯示了五頁和向前向后的七個顯項，但往往我們很多情況下是不知道會有多少個分頁項顯示出來，而且也無法確定每個分頁選項的寬度是多少，也就無法確認容器的寬度。
優點：實現方法簡單易懂，瀏覽器兼容性強；
缺點：擴展性差，無法自適應未知項情況。
二、inline-block實現水平居中方法
這個方法早期在《如何解決inline-block元素的空白間距》和《CSS3制作的分頁導航》中都有涉及到，但未單獨提取出來。此次，將這種方法拿出來說。
僅inline-block屬性是無法讓元素水平居中，他的關鍵之處要在元素的父容器中設置text-align的屬性為“center”，這樣才能達到效果：
.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; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
效果如下：
這個方法相對來說也是簡單易懂，但使用了inline-block解決了水平居中的問題，卻又產生了一個新的問題，就是分頁項與分頁項由回車符帶來的空白間距，那么不知情的同學就會不知道如何解決？（而且這個間距並不是所有瀏覽器都有），所以需要解決下inline-block帶來的間距，詳細的解決方法可以閱讀《如何解決inline-block元素的空白間距》一文。
做點：簡單易懂，擴展性強；
缺點：需要額外處理inline-block的瀏覽器兼容性。
三、浮動實現水平居中的方法
剛看到標題，大家可能會感到很意外，元素都浮動了，他還能水平居中？大家都知道，浮動要么靠左、要么靠右，還真少見有居中的。其實略加處理就有了。
.pagination { float: left; width: 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%*/ } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
效果如下所示：
這種方法實現和前面的與眾不同，使用了浮動配合position定位實現。下面簡單的介紹了一下這種方法實現原理，詳細的可以閱讀Matthew James Taylor寫的《Horizontally Centered Menus with no CSS hacks》一文。
沒有浮動的div：大家都知道div是一個塊元素，其默認的寬度就是100%，如圖所示：
如果div設置了浮動之后，他的內容有多寬度就會撐開有多大的容器（除顯式設置元素寬度值之外），這也是我們實現讓分頁導航居中的關鍵所在：
接下來使用傳統的制作方法，我們會讓導航浮動到左邊，而且每個分頁項也進行浮動，就如下圖所示一樣：
現在要想的辦法是讓分頁導航居中的效果了，在這里是通過“position:relative”屬性實現，首先在列表項“ul”上向右移動50%（left:50%;），看到如下圖所示：
如上圖所示一樣，整個分頁向右移動了50%的距離，緊接着我們在“li”上也定義“position:relative”屬性，但其移動的方向和列表“ul”移動的方向剛好是反方向，而其移動的值保持一致：
這樣一來就實現了float浮動居中的效果。
特別聲明：方法三思想來源於Matthew James Taylor寫的《Horizontally Centered Menus with no CSS hacks》一文，並且引用其文中演示的示意圖。
優點：兼容性強，擴展性強；
缺點：實現原理較復雜。
四、絕對定位實現水平居中
絕對定位實現水平居中，我想大家也非常的熟悉了，並且用得一定不少，早期是這樣使用的：
.ele { position: absolute; width: 寬度值; left: 50%; margin-left: -(寬度值/2); }
但這種實現我們有一個難題，我並不知道元素的寬度是多少，這樣也就存在如方法一所說的難題，但我們可以借助方法三做一點變通：
.pagination { position: relative; } .pagination ul { position: absolute; left: 50%; } .pagination li { line-height: 25px; margin: 0 5px; float: left; position: relative;/*注意，這里不能是absolute，大家懂的*/ right: 50%; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
效果如下所示：
優點：擴展性強，兼容性強;
缺點：理解性難。
五、CSS3的flex實現水平居中方法
CSS3的flex是一個很強大的功能，她能讓我們的布局變得更加靈活與方便，唯一的就是目前瀏覽器的兼容性較差。那么第五種方法，我們就使用flex來實現，其實這種方法早在《CSS3實現水平垂直居中》一文有介紹，我們把水平居中的部分代碼取出來：
.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; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
效果如下：
優點：實現便捷，擴展性強
缺點：兼容性差。
六、CSS3的fit-content實現水平居中方法
今天看《Horizontal centering using CSS fit-content value》一文，讓我體驗了一下"fit-content"制作水平居中的方法。我也將這種方法收進來。
“fit-content”是CSS中給“width”屬性新加的一個屬性值，他配合margin可以讓我輕松的實現水平居中的效果：
.pagination ul { width: -moz-fit-content; width:-webkit-fit-content; width: fit-content; margin-left: auto; margin-right: auto; } .pagination li { line-height: 25px; margin: 0 5px; float: left; } .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(top,#434345,#2f3032); } .pagination a:hover { text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a; background: linear-gradient(top,#f48b03,#c87100); }
效果如下：
優點：簡單易懂，擴展性強;
缺點：瀏覽器兼容性差
上面總共為大家整理了六種實現水平居中的方法，希望對大家有所幫助。如果您有更好的建議，希望能與我們一起分享。
如需轉載，煩請注明出處：http://www.w3cplus.com/css/elements-horizontally-center-with-css.html
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: https://www.w3cplus.com/css/elements-horizontally-center-with-css.html © w3cplus.com