div（固定寬度和不固定寬度）居中顯示的方法總結

今天我總結一下css實現div居中的方法，有的是固定寬度的，還有的是不固定寬度的。

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

css中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設定為auto即可。

在實際使用中，我們可以為這些需要居中的元素建立乙個起容器作用的div。需要特別注意的一點就是，必須為該容器指定寬度：

div#container

2.使用text-align實現div css居中

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

之所以說它是hack，是因為這種方法並沒有將文字屬性應用到文字上，而是應用到了作為容器的元素上。這也給我們帶來了額外的工作。在建立好布局必須的div之後，我們要按照如下**為body應用text-align屬性：

body

之後會出現什麼問題嗎？body的所有子孫元素都會被居中顯示。

因此，我們就需要用再寫一條規則，讓其中的文字回到預設的居左對齊：

可以想象這條附加的規則將帶來一些不便。另外，真正完全遵循標準的瀏覽器並不會改變容器的位置，而只會讓其中的文字居中顯示。

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

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

body

#container

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

4.負外邊距解決方案

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

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

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

#container

5.在不設定 div 元素的寬度（width）的情況下，如何讓 div 元素居中

最後一種方法，也是最近做響應式web開發時遇到的問題，在不設定寬的的情況下怎麼讓div居中就是乙個問題，下面我就講一下怎麼讓不設定寬度的div居中的方法

讓這個div居中

.wrap .inner

.wrap 使用 float 是為了讓 .wrap 的寬度等於 .inner 的寬度

讓 .wrap 的左邊在父層的中線上，讓.inner 的左邊相對 .wrap 向左移動一半，這樣就可以實現 .inner 在.wrap 的父層的中間。