使用CSS讓元素置中顯示的技巧

轉自：http://www.linji.cn/post/1595/

用CSS讓元素置中顯示並不是件很簡單的事情——同樣的合法CSS置中設定在不同的瀏覽器中的表現行為卻各有千秋。在這裡，我介紹一種很好的置中處理辦法，但這之前，讓我們先來看看最常見的使用CSS置中元素的方法。

使用自動外邊距實現置中

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

div#content{ </p><p> margin-left:auto; </p><p> margin-right:auto; </p><p> width:800px; </p><p> }

div#content{<br />margin-left:auto;<br />margin-right:auto;<br />width:800px;<br />}
在
大多數主流瀏覽器中，這種方法都非常有效，即使是Windows平台上的IE6，在其標準相容模式(Compliance
Mode)下也能夠正常顯示。但不幸的是，在更低版本的IE加，這種設定卻並不能實現置中效果。所以若想在實際項目中使用這種方法，那麼就要確保使用者的
IE瀏覽器版本必須不低於6.0。

下表列出了常見瀏覽器對自動外邊距置中的支援情況：

    瀏覽器                      版本                                     是否支援
Internet Explorer             7.0標準相容模式                            是
Internet Explorer             7.0 向前相容模式(Quirks Mode)                   否
Internet Explorer             6.0標準相容模式                           是
Internet Explorer             向前相容模式                              否
Internet Explorer             5.5 WIndows版本                            否
Internet Explorer             5.0 WIndows版本                            否
Internet Explorer             5.2 蘋果版本                                 是
Mozila                            所有版本                                     是
Mozila Firefox                  所有目前的版本                                 是
Netscape                       4.x                                                             否
Netscape                       6.x及以上版本                               是
Opera                            6.0和7.0 Win/Apple版本                    是
Safari                             1.2                                                        是

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

使用text-align實現置中

另一種實現元素置中的方法是使用text-align屬性， 將該屬性值設定為center並應用到body元素上即可。這種做法是徹頭徹尾的hack，但它卻能相容大多數瀏覽器，所以在某些情況下也自然是必不可少的。

之所以說它是hack，是因為這種方法並沒有將文字屬性應用到文本上，而是應用到了作為視窗的元素上。這也就給我們帶來了額外的工作。

在建立好布局必須的div之後，我們要按照如下代碼為body應用text-align屬性：

body{<br />text-align:center;<br />}

body{<br />text-align:center;<br />}
之後會出現什麼問題嗎？body的所有子孫元素都會被置中顯示，因此我們需要再寫一條規則，讓其中的文本回到預設的居靠左對齊：
p { </p><p> text-align: left;<br />}

p {<br />text-align: left;<br />}
可以想象這條附加的規則將帶來一些不便。另外，真正完全遵循標準的瀏覽器並不會改容器的位置，而只會讓其中的文字置中顯示。

組合使用自動處邊距和文本對齊

因為文本對齊置中方式有著良好的向下相容性，且自動外邊距方式也被大多數當代瀏覽器支援，所以很多設計師將二者組合起來使用，以期讓置中效果得到最大限度的跨瀏覽器支援：

body{<br />text-align:center;<br />}<br />#content{<br />margin-left:auto;<br />margin-right:auto;<br />border:1px solid red;<br />width: 168px;<br />text-align:left;<br />} body{ </p><p> text-align:center; </p><p> } </p><p> #content{ </p><p> margin-left:auto; </p><p> margin-right:auto; </p><p> border:1px solid red; </p><p> width: 168px; </p><p> text-align:left; </p><p> } 
可是這始終是個hack，無論如何也算不上完美。我們還是需要為置中容器中的文本編寫附加的規則，但至少在各個瀏覽器中看起來都 不錯。

負外邊距解決方案

最後我再介紹一種我個人感覺最好的一種置中方式：負外邊距解決方案。

u

首建立一個包含置中元素的容器，然後將其絕對位置於相對頁面左邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。

然後，將容器的左外邊距設定為負的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點，如下：

#content{ </p><p> width:760px; </p><p> position: absolute; </p><p> left: 50%; </p><p> margin-left:-380px; </p><p> }