css絕對位置實現置中的八種方式代碼詳解

絕對位置元素不在普通內容流中渲染，因此margin:auto可以使內容在通過top: 0; left: 0; bottom: 0;right: 0;設定的邊界內垂直置中。

置中方式：

一、容器內（Within Container）

內容塊的父容器設定為position:relative，使用上述絕對置中方式，可以使內容置中顯示於父容器。

.Center-Container {  position: relative;}.Absolute-Center {  width: 50%;  height: 50%;  overflow: auto;  margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0;}

以下其餘的demo預設上面的CSS樣式已引用包括進去，在此基礎上只提供額外的類供使用者追加以實現不同的功能。

二、視區內（Within Viewport）

想讓內容塊一直停留在可視地區內？將內容塊設定為position:fixed;並設定一個較大的z-index層疊屬性值。

.Absolute-Center.is-Fixed {  position: fixed;  z-index: 999;}

注意：對MobileSafari，若內容塊不是放在設定為position:relative;的父容器中，內容塊將垂直置中於整個文檔，而不是可視地區內垂直置中。

三、側邊欄 (Offsets)

如果你要設定一個固頂的頭或增加其他的側邊欄，只需要在內容塊的樣式中加入像這樣的CSS樣式代碼：top:70px;bottom:auto;由於已經聲明了margin:auto;，該內容塊將會垂直置中於你通過top,left,bottom和right屬性定義的邊界框內。

你可以將內容塊固定與螢幕的左側或右側，並且保持內容塊垂直置中。使用right:0;left:auto;固定於螢幕右側，使用left:0;right:auto;固定與螢幕左側。

.Absolute-Center.is-Right {  left: auto; right: 20px;  text-align: right;}.Absolute-Center.is-Left {  right: auto; left: 20px;  text-align: left;}

四、響應式/自適應(Responsive)

絕對置中最大的優勢應該就是對百分比形式的寬高支援的非常完美。甚至min-width/max-width 和min-height/max-height這些屬性在自適應盒子內的表現也和預期很一致。

.Absolute-Center.is-Responsive {  width: 60%;   height: 60%;  min-width: 200px;  max-width: 400px;  padding: 40px;}

給內容塊元素加上padding也不影響內容塊元素的絕對置中實現。

五、 溢出情況(Overflow)

內容高度大於塊元素或容器（視區viewport或設為position:relative的父容器）會溢出，這時內容可能會顯示到塊與容器的外面，或者被截斷出現顯示不全（分別對應內容塊overflow屬性設定為visible和hidden的表現）。

加上overflow: auto會在內容高度超過容器高度的情況下給內容塊顯示捲軸而不越界。

.Absolute-Center.is-Overflow {  overflow: auto;}

如果內容塊自身不設定任何padding的話，可以設定max-height: 100%;來保證內容高度不超越容器高度。

六、重繪(Resizing)

你可以使用其他class類或javascript代碼來重繪內容塊同時保證置中，無須手動重新計算中心尺寸。當然，你也可以添加resize屬性來讓使用者拖拽實現內容塊的重繪。

絕對置中（Absolute Centering）可以保證內容塊始終置中，無論內容塊是否重繪。可以通過設定min-/max-來根據自己需要限制內容塊的大小，並防止內容溢出視窗/容器。

.Absolute-Center.is-Resizable {  min-width: 20%;  max-width: 80%;  min-height: 20%;  max-height: 80%;  resize: both;  overflow: auto;}

如果不使用resize:both屬性，可以使用CSS3動畫屬性transition來實現重繪的視窗之間平滑的過渡。一定要設定overflow:auto;以防重繪的內容塊尺寸小於內容的實際尺寸這種情況出現。

絕對置中（AbsoluteCentering）是唯一支援resize:both屬性實現垂直置中的技術。

注意：

1. 要設定max-width/max-height屬性來彌補內容塊padding，否則可能溢出。

2. 手機瀏覽器和IE8-IE10瀏覽器不支援resize屬性，所以如果對你來說，這部分使用者體驗很必要，務必保證對resizing你的使用者有可行的退路。

3. 聯合使用resize 和 transition屬性會在使用者重繪時，產生一個transition動畫延遲時間。

七、圖片(Images)

絕對置中（AbsoluteCentering）也適用於圖片。對圖片自身應用class類或CSS樣式，並給圖片添加height:auto樣式，圖片會自適應置中顯示，如果外層容器可以resize則隨著容器的重繪，圖片也相應重繪，始終保持置中。

需要注意的是height:auto雖然對圖片置中有用，但如果是在圖片外層的內容塊上應用了height:auto則會產生一些問題：規則的內容塊會被展開填充整個容器。這時，我們可以使用可變高度(Variable Height)方式解決這個問題。問題的原因可能是渲染圖片時要計算圖片高度，這就如同你自己定義了圖片高度一樣，瀏覽器得到了圖片高度就不會像其他情況一樣去解析margin:auto垂直置中了。所以我們最好對圖片自身應用這些樣式而不是父元素。

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {  height: auto;}.Absolute-Center.is-Image img {   width: 100%;  height: auto;}

八、可變高度（Variable Height）

這種情況下實現絕對置中（AbsoluteCentering）必須要聲明一個高度，不管你是基於百分比的高度還是通過max-height控制的高度，還有，別忘了設定合適的overflow屬性。對自適應/響應式情景，這種方法很不錯。

與聲明高度效果相同的另一種方法是設定display:table;這樣無論實際內容有多高，內容塊都會保持置中。這種方法在一些瀏覽器（如IE/FireFox）上會有問題，我的搭檔Kalley

在ELL Creative（訪問ellcreative.com ）上寫了一個基於Modernizr外掛程式的檢測函數，用來檢測瀏覽器是否支援這種置中方法，進一步增強使用者體驗。

Javascript：

/* Modernizr Test for Variable Height Content */Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);});

CSS：

.absolutecentercontent .Absolute-Center.is-Variable {  display: table;  height: auto;}

瀏覽器安全色性不太好，若Modernizr不能滿足你的需求，你需要尋找其他方法解決。

1. 與上述重繪(Resizing)情況的方法不相容

2. Firefox/IE8:使用display:table會使內容塊垂直居上，不過水平還是置中的。

3. IE9/10: 使用display:table會使內容塊顯示在容器左上方。

4. Mobile Safari:內容塊垂直置中；若使用百分比寬度，水平方向置中會稍微偏離中心位置。