負外邊距(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,體驗一下這一進階布局技術的好處吧。