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. IE8不支援

2. 屬性需要寫瀏覽器廠商首碼

3. 可能干擾其他transform效果

4. 某些情形下會出現文本或元素邊界渲染模糊的現象

進一步瞭解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，體驗一下這一進階布局技術的好處吧。