用CSS讓元素居中顯示並不是件很簡單的事。同樣的CSS居中設定在不同瀏覽器的表現也各有千秋。本文就介紹了在CSS中常見的幾種讓元素水平居中顯示的方法。
1.使用自動外邊距實現居中
CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設為auto即可。在實際使用中，我們可以為這些需要居中的元素建立一個起容器作用的div。需要特別注意的一點就是，必須為該容器指定寬度：
在大多數主流瀏覽器中，這種方法都非常有效，即使是Windows平台上的IE6，在其標準相容模式(compliance mode)下也能夠正常顯示。但不幸的是，在較低版本的IE中，這種設定卻並不能達到居中效果。所以若想在實際專案中使用這種方法，那麼就要確保使用者的IE瀏覽器版本不低於6.0。
儘管在支援上不盡人意，但大多數設計師都建議盡可能使用這種方法。此方法也被認為是在各種用CSS實現元素水平居中方法中最正確、最合理的一種。
2.使用text-align實作居中
另一種實作元素居中的方法是使用text-align屬性，將該屬性值設為center並套用到body元素上即可。這種做法是徹頭徹尾的hack，但它卻能相容於大多數瀏覽器，所以在某些情況下也自然必不可少。
之所以說它是hack，是因為這種方法並沒有將文字屬性應用到文字上，而是應用到了作為容器的元素上。這也為我們帶來了額外的工作。在建立好佈局必須的div之後，我們要依照以下程式碼為body應用text-align屬性：
之後會出現什麼問題嗎?body的所有子孫元素都會被居中顯示。
因此，我們就需要用再寫一條規則，讓其中的文字回到預設的居左對齊：
可以想像這條附加的規則將會帶來一些不便。另外，真正完全遵循標準的瀏覽器並不會改變容器的位置，只會讓其中的文字居中顯示。
3.組合使用自動外邊距和文字對齊
因為文字對齊居中方式有著良好的向下兼容性，且自動外邊距方式也被大多數當代瀏覽器支持，所以很多設計師將二者組合起來使用，以期讓居中效果得到最大限度的跨瀏覽器支援：
但這始終是個hack，無論如何也算不上完美。我們還是需要為居中容器中的文字編寫附加的規則，但至少在各個瀏覽器中看起來都不錯。
4.負外邊距解決方案
負外邊距解決方案遠不是為元素加上負外邊距這麼簡單。這種方法需要同時使用絕對定位和負外邊距兩種技巧。
以下是該方案的具體實作方法。首先，建立一個包含居中元素的容器，然後將其絕對定位在相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。
然後，將容器的左外邊距值設定為負的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點。
雖然這並不是首選的解決方案，但也是個不錯的方法，且適用性極廣。