css中幾種實作居中樣式技術優缺點程式碼詳解

負外邊距(Negative Margins)

這或許是目前最受歡迎的使用方法。如果區塊元素尺寸已知，可以透過以下方式讓內容區塊居中於容器顯示：

外邊距margin取負數，大小為width/height（不使用box-sizing: border-box時包含padding， ）的一半，再加上top: 50%; left: 50%;。即：

.is-Negative {  
        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-IE7上也表現良好的方法。

優點：

1.      良好的跨瀏覽器特性，相容於IE6-IE7。

2.      程式碼量較少。

缺點：

1.      無法適應。不支援百分比尺寸和min-/max-屬性設定。

2.      內容物可能溢出容器。

3.      邊距大小與padding,和是否定義box-sizing: border-box有關，計算需依不同情況。

變形（Transforms）

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容區塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴，還要加上

top: 50%; left: 50%;

程式碼類別：

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

優點：

##1.      內容可變高度

2.       程式碼量少

#1 。渲染模糊的現象

進一步了解transform實作居中的知識可以參考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

##表格單元格（Table-Cell）

總的說來這可能是最好的居中實作方法，因為內容區塊高度會隨著實際內容的高度變化，瀏覽器對此的相容性也好。最大的缺點是需要大量的額外標記，需要三層元素讓最內層的元素居中。

HTML：

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

CSS：

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

優點：

1.      高度變化

2.      內容溢出將父元素撐開。

3.      跨瀏覽器相容性佳。

缺點：

需要額外html標記

十二、行內區塊元素（Inline-Block）

#很受歡迎的一種居中實作方式，基本概念是使用display: inline-block, vertical-align: middle和一個偽元素讓內容區塊處於容器中央。

如果內容區塊寬度大於容器寬度，例如放了一個很長的文本，但內容區塊寬度設定最大不能超過容器的100%減去0.25em，否則使用偽元素:after內容區塊會被擠到容器頂部，使用:before內容塊會向下偏移100%。

如果你的內容區塊需要佔據盡可能多的水平空間，可以使用max-width: 99%;（針對較大的容器）或max-width: calc(100% -0.25em)（取決於支援的瀏覽器和容器寬度）。

HTML：

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

CSS：

.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+ */   
}

這種方法的優劣和單元格Table-Cell方式差不多，起初我把這種方式忽略掉了，因為這確實是一種hack方法。不過，無論如何，這是很流行的一種用法，瀏覽器支援的也很好。

優點：

1.      高度變化

#2.      內容溢位將父元素撐開。

3.      支援跨瀏覽器，也適應IE7。

缺點：

1.需要一個容器

2.水平居中依賴margin-left: -0.25em;該尺寸對於不同的字體/字號需要調整。

3.內容區塊寬度不能超過容器的100% - 0.25em。

 Flexbox

這是CSS佈局未來的趨勢。 Flexbox是css3新增屬性，設計初衷是為了解決像垂直居中這樣的常見佈局問題。

記住Flexbox不只是用於居中，也可以分開或解決一些令人抓狂的佈局問題。

優點：

1.內容區塊的寬高任意，優雅的溢出。

2.可用於更複雜高階的佈局技術。

缺點：

1.      IE8/IE9不支援。

2.      Body需要特定的容器和CSS樣式。

3.      在現代瀏覽器上運作的程式碼需要瀏覽器廠商前綴​​。

4.      表現上可能會有一些問題

#建議：

每種技巧都有其優劣之處。你選擇哪一種技術取決於支援的瀏覽器和你的編碼。使用上面的對照表有助於你做出決定。

作為一種簡單的替代方案，絕對居中(Absolute Centering)技術表現良好。曾經你使用負邊距（Negative Margins）的地方，現在可以用絕對居中(Absolute Centering)替代了。你不再需要處理討厭的邊距計算和額外的標記，而且還能讓內容塊自適應大小居中。

如果你的網站需要可變高度的內容，可以試試儲存格(Table-Cell)和行內區塊元素(Inline-Block)這兩種方法。如果你處在流血的邊緣，試試Flexbox，體驗一下這項高階佈局技術的好處。

以上是css中幾種實作居中樣式技術優缺點程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！