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:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

以上是css絕對定位實現居中的八種方式程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！