負外邊距(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>.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;
}十二、行內區塊元素（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>.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+ */
}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中文網其他相關文章！
