CSS中怎么實現元素水平居中

本篇文章為大家展示了CSS中怎么實現元素水平居中，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

用CSS讓元素居中顯示并不是件很簡單的事情—同樣的合法CSS居中設置在不同瀏覽器中的表現行為卻各有千秋。讓我們先來看一下CSS中常見的幾種讓元素水平居中顯示的方法。

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

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

div#container{   margin-left:auto;   margin-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-left:auto;   margin-right:auto;   border:1pxsolidred;   width:168px;   text-align:left   }

可是這始終是個hack，無論如何也算不上***。我們還是需要為居中容器中的文本編寫附加的規則，但至少在各個瀏覽器中看起來都不錯。

　　4.負外邊距解決方案

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

下面是該方案的具體實現方法。首先，創建一個包含居中元素的容器，然后將其絕對定位于相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。

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

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

上述內容就是CSS中怎么實現元素水平居中，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。