面試彙總——怎樣讓一個元素水平垂直居中

本文是面試彙總分支——怎樣讓一個元素水平垂直居中。

居中效果在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);
}    

這是一個極普通的樣式代碼，初步的效果：

這很顯然不是咱們須要的效果，接下來咱們分幾種方案來製做：

1、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);
}    

 

代碼中綠色部分是爲了實現分頁居中效果而添加的代碼。（下文中沒有特殊聲明，綠色部分代碼表示新增長的代碼。），先來看看效果：

效果是讓咱們實現了，但其擴展性那就不必定強了。示例中只顯示了五頁和向前向後的七個顯項，但每每咱們不少狀況下是不知道會有多少個分頁項顯示出來，並且也沒法肯定每一個分頁選項的寬度是多少，也就沒法確認容器的寬度。

優勢：實現方法簡單易懂，瀏覽器兼容性強；

缺點：擴展性差，沒法自適應未知項狀況。

2、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的瀏覽器兼容性。

3、浮動實現水平居中的方法

剛看到標題，你們可能會感到很意外，元素都浮動了，他還能水平居中？你們都知道，浮動要麼靠左、要麼靠右，還真少見有居中的。其實略加處理就有了。

.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》一文，而且引用其文中演示的示意圖。

優勢：兼容性強，擴展性強；

缺點：實現原理較複雜。

4、絕對定位實現水平居中

絕對定位實現水平居中，我想你們也很是的熟悉了，而且用得必定很多，早期是這樣使用的：

.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);
}    

 

效果以下所示：

優勢：擴展性強，兼容性強;

缺點：理解性難。

5、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);
}    

 

效果以下：

優勢：實現便捷，擴展性強

缺點：兼容性差。

6、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