CSS:CSS中元素水平置中顯示的方法

　　用CSS讓元素置中顯示並不是件很簡單的事 情。同樣的CSS置中設定在不同瀏覽器中的表現也各有千秋。本文就介紹了在CSS中常見的幾種讓元素水平置中顯示的方法。

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

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

div#container{

magin-left:auto;

magin-right:auto;
width:168px:

}

　 　在大多數主流瀏覽器中，這種方法都非常有效，即使是Windows平台上的IE6，在其標準相容模式(compliancemode)下也能夠正常顯 示。但不幸的是，在更低版本的IE中，這種設定卻並不能實現置中效果。所以若想在實際項目中使用這種方法，那麼就要確保使用者的IE瀏覽器版本不低於 6.0。

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

　　2.使用text-align實現置中

　　另一種實現元素置中的方法是使用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-right:auto;

              margin-left:auto;

               border:1pxsolid red;

               wedth: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;}

　　雖然這並不是首選的解決方案，但也是個不錯的方法，且適用性極廣。

原文連結:http://hi.baidu.com/aboyi/blog/item/2ff84a905df8bd87ab77a464.html