絕對定位元素不在普通內容流中渲染，因此margin:auto可以使內容在透過top: 0; left: 0; bottom: 0;right: 0;設定的邊界內垂直居中。
居中方式：
內容區塊的父容器設定為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樣式已引用包括進去，在此基礎上只提供額外的類別供用戶追加以實現不同的功能。
想讓內容區塊一直停留在視覺區域內？將內容塊設定為position:fixed;並設定一個較大的z-index層疊屬性值。
.Absolute-Center.is-Fixed {
position: fixed;
z-index: 999;
}注意：對MobileSafari，若內容區塊不是放在設定為position:relative;的父容器中，內容區塊將垂直居中於整個文檔，而不是可視區域內垂直居中。
如果你要設定一個固頂的頭或增加其他的邊欄，只需要在內容塊的樣式中加入像這樣的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;
}絕對居中最大的優勢應該是對百分比形式的寬高支持的非常完美。甚至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也不影響內容區塊元素的絕對居中實作。
內容高度大於區塊元素或容器（視區viewport或設為position:relative的父容器）會溢出，這時內容可能會顯示到區塊與容器的外面，或被截斷出現顯示不全（分別對應內容區塊overflow屬性設定為visible和hidden的表現）。
加上overflow: auto會在內容高度超過容器高度的情況下為內容區塊顯示捲軸而不越界。
.Absolute-Center.is-Overflow {
overflow: auto;
}如果內容區塊本身不設定任何padding的話，可以設定max-height: 100%;來確保內容高度不超越容器高度。
你可以使用其他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屬性實作垂直居中的技術。
注意：
要設定max-width/max-height屬性來彌補內容區塊padding，否則可能會溢位。
手機瀏覽器和IE8-IE10瀏覽器不支援resize屬性，所以如果對你來說，這部分使用者體驗很必要，務必保證對resizing你的使用者有可行的退路。
聯合使用resize 和 transition屬性會在使用者重繪時，產生一個transition動畫延遲時間。
絕對居中（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中文網其他相關文章！
