CSS中經常使用的水平居中顯示方法

  本文參考：http://www.enet.com.cn/article/2009/0309/A20090309442560.shtml 

CSS中常見的幾種讓元素水平居中顯示的方法： 

　　1.使用自動外邊距實現居中 

　　CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設置爲auto便可。在實際使用中，咱們能夠爲這些須要居中的元素建立一個起容器做用的div。須要特別注意的一點就是，必須爲該容器指定寬度： 

div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}

說明：在大多數主流瀏覽器中，這種方法都很是有效，即便是Windows平臺上的IE6，在其標準兼容模式（compliance mode）下也可以正常顯示。可是，在更低版本的IE中，這種設置卻並不能實現居中效果。因此若想在實際項目中使用這種方法，那麼就要確保用戶的IE瀏覽器版本不低於6.0。 

　　儘管在支持上不盡如人意，但大多數設計師都建議儘量地使用這種方法。該方法也被認爲是在各類用CSS實現元素水平居中方法中最正確、最合理的一種。 

　　2.使用text-align實現居中 

將該屬性值設置爲center並應用到body元素上便可。

這種作法是徹頭徹尾的hack，但它卻能兼容大多數瀏覽器，因此在某些狀況下也天然必不可少。之因此說它是hack，是由於這種方法並無將文本屬性應用到文本上，而是應用到了做爲容器的元素上。這也給咱們帶來了額外的工做。在建立好佈局必須的div以後，咱們要按照以下代碼爲body應用text-align屬性： 

body{
text-align:center;
}

　　因爲body的全部子孫元素都會被居中顯示。故，須要再寫一條規則，讓其中的文本回到默認的居左對齊： 

p {
text-align:left;
}

說明：附加的規則將帶來一些不便。另外，真正徹底遵循標準的瀏覽器並不會改變容器的位置，而只會讓其中的文字居中顯示。 

　　3.組合使用自動外邊距和文本對齊 

　　由於文本對齊居中方式有着良好的向下兼容性，且自動外邊距方式也被大多數當代瀏覽器支持，因此不少設計師將兩者組合起來使用，以期讓居中效果獲得最大限度的跨瀏覽器支持： 

body {
text-align: center;
}

#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}

說明：始終是個hack。須要爲居中容器中的文本編寫附加的規則，不過在各個瀏覽器中看起來都不錯。 

　　4.負外邊距解決方案 

　　負外邊距解決方案遠不是僅僅爲元素添加負外邊距這麼簡單。這種方法須要同時使用絕對定位和負外邊距兩種技巧。 

　　下面是該方案的具體實現方法。首先，建立一個包含居中元素的容器，而後將其絕對定位於相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。 而後，將容器的左外邊距值設置爲負的容器寬度的一半。這樣便可將該容器固定在頁面水平方向的中點。   

#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}

說明：沒有任何hack。雖然這並非首選的解決方案，但也是個不錯的方法，且適用性極廣。若想獲得最普遍的瀏覽器支持，那麼這種方法將會是最好的選擇。