css絕對定位居中技術優缺點圖表詳解

絕對定位居中(Absolute Centering)技術

我們經常用margin:0 auto來實現水平居中，而一直認為margin:auto不能實現垂直居中…實際上，實作垂直居中只需要宣告元素高度和下面的CSS:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

優點：

1.支援跨瀏覽器，包括IE8-IE10.

2.無需其他特殊標記，CSS代碼量少

3.支援百分比%屬性值和min-/max-屬性

4.只用這一類可實現任何內容塊居中

5.不論是否設定padding都可居中（在不使用box-sizing屬性的前提下）

6.內容塊可以被重繪。

7.完美支持圖片居中。

缺點：

1.必須宣告高度（查看可變高度Variable Height）。

2.建議設定overflow:auto來防止內容越界溢出。 （查看溢出Overflow）。

3.在Windows Phone裝置上不起作用。

瀏覽器相容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

絕對定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均測試通過。

比較表：

絕對居中法並不是唯一的實作方法，實現垂直居中還有些其他的方法，並各有各的優勢。採用哪種技術取決於你的瀏覽器是否支援和你使用的語言標記。這個對照表有助於你根據自己的需求做出正確的選擇。

##Major CaveatsYes*not perfect cross-browserYes

Technique	Browser Support	#Responsive	Overflow	resize:both	#Variable Height	#Variable Height
		##Absolute Centering		#Modern & IE8+	#Yes	#Scroll, can overflow container Yes
Variable Height		#Negative Margins		All	#No	Scroll
Resizes but doesn't stay centeredNo	Not responsive, margins must be calculated manually		Transforms	#Modern & IE9+	################################################################################################################################### #######Yes##################Scroll, can overflow container#################Yes ##################Yes######	Blurry rendering
Table-Cell	Modern & IE8+	Yes	Expands container	#No
Extra markup	##Inline-Block	#Modern, IE8+ & IE7*	#Yes	#Expands container	##No	Yes
#Requires container, hacky styles	#Flexbox	Modern & IE10+	#Yes	Scroll, can overflow container	Yes	Yes

###################################################################################################################################################### # ########Requires container, vendor prefixes#################### 解釋：######透過上述描述，絕對居中（AbsoluteCentering ）的工作機制可以闡述如下：######1、在普通內容流（normal content flow）中，margin:auto的效果等同於margin-top:0;margin-bottom:0。 ######W3C中寫道If 'margin-top', or'margin-bottom' are 'auto', their used value is 0.######2、position:absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不進行渲染。 ######Developer.mozilla.org:...an element that is positioned absolutely is taken out of the flow and thustakes up no space#########3、為區塊區域設定top: 0; left: 0; bottom: 0; right: 0;將給瀏覽器重新分配一個邊界框，此時該區塊block將填充其父元素的所有可用空間，父元素一般為body或宣告為position:relative;的容器。 ######Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left propertiesspecify offsets from the edge of the element's containing block (what theelement is positioned relative to).######4、  給內容區塊設定一個高度height或寬度width，能夠防止內容區塊佔據所有的可用空間，促使瀏覽器根據新的邊界框重新計算margin:auto######Developer.mozilla.org: The margin of the[absolutely positioned] element is then positioned inside these offsets.######5、由於內容區塊被絕對定位，脫離了正常的內容流，瀏覽器會給margin-top,margin-bottom相同的值，使元素塊在先前定義的邊界內居中。 ######W3.org: I​​f none of the three [top, bottom,height] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solvethe equation under the extra constraint that the two margins get equal values.AKA: center the block vertically######這麼看來， margin:auto似乎生來就是為絕對居中(Absolute Centering)設計的，所以絕對居中(Absolute Centering)應該都相容於符合標準的現代瀏覽器。 ######簡而言之（TL;DR）：絕對定位元素不在普通內容流中渲染，因此margin:auto可以使內容在通過top: 0; left: 0; bottom: 0;right: 0 ;設定的邊界內垂直居中。 ###

以上是css絕對定位居中技術優缺點圖表詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！