元素徹底居中的方法

如何簡單方便地讓元素居中呢？在不一樣狀況下寫法或許還得不同，下面咱們直入主題，說幾個居中的方法：

方法一：（我的以爲最好用的一種）

.parent{
  position: relative;
}
.child {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  height:20px;/*元素高度是必須的*/
}

注意：瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10，這種方法在Windows Phone上不起做用

方法2、負margin值

這或許是最經常使用的方法。若是知道了各個元素的大小，設置等於寬高一半大小的負margin值（若是沒有使用box-sizing: border-box樣式，還須要加上padding值），再配合top: 50%; left: 50%;樣式就會使塊元素居中。

.child {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
/*這是按照預想狀況也能在工做在IE6-7下的惟一方法。*/

方法3、transform法

.child { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

注意：不支持IE8；須要寫廠商前綴；會和其餘transform樣式有衝突；某些狀況下的邊緣和字體渲染會有問題；

方法4、table-cell法

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

方法5、inline-block法居中

基本方法是使用 display: inline-block, vertical-align: middle樣式和僞元素讓內容塊在容器中居中。個人實現用到了幾個在其餘地方見不到的新技巧解決了一些問題。

內容區聲明的寬度不能大於容器的100% 減去0.25em的寬度。就像一段帶有長文本的區域。否則，內容區域會被推到頂端，這就是使用:after僞類的緣由。使用:before僞類則會讓元素有100%的大小！

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}
 
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}
 
.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}
 
.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

 

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>

注意：

• 須要額外容器
• 依賴於margin-left: -0.25em的樣式，作到水平居中，須要爲不一樣的字體大小做調整
• 內容區聲明的寬度不能大於容器的100% 減去0.25em的寬度

方法6、Flexbox法

CSS將來發展的方向就是採用Flexbox這種設計，解決像垂直居中這種共同的問題。請注意，Flexbox有不止一種辦法居中，他也能夠用來分欄，並解決奇奇怪怪的佈局問題。

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
/*不支持IE8-9*/

對照表

所用樣式	支持的瀏覽器	是否 響應式	內容溢出後的樣式	resize:both	高度可變	主要缺陷
Absolute	現代瀏覽器&IE8+	是	會致使容器溢出	是	是*	‘可變高度’的特性不能跨瀏覽器
負margin值	全部	否	帶滾動條	大小改變後再也不居中	否	不具備響應式特性，margin值必須通過手工計算
Transform	現代瀏覽器&IE9+	是	會致使容器溢出	是	是	妨礙渲染
Table-Cell	現代瀏覽器&IE8+	是	撐開容器	否	是	會加上多餘的標記
Inline-Block	現代瀏覽器&IE8+&IE7*	是	撐開容器	否	是	須要使用容器包裹和hack式的樣式
Flexbox	現代瀏覽器&IE10+	是	會致使容器溢出	是	是	須要使用容器包裹和廠商前綴（vendor prefix）