爲什麼DIV不居中？

Question

我有一個DIV，我想保持居中並停靠在頁面的底部。除了它列在右邊之外，我已經實現了很多。我已經設置了一個jsFiddle來演示這個問題。

我懷疑我需要調整利潤率，但到目前爲止我的努力沒有成效。我試圖加入：

margin: 0; 

但沒有。我錯過了什麼？

Answer 1

需要設置左0（零）和箱大小邊境盒！

檢查：http://jsfiddle.net/pR4P5/7/

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    border: 1px solid red; 
    text-align: center; 
    margin: 0; 
    box-sizing: border-box; 
    left:0; 
} 

有一個愉快的一天，

阿爾貝託

Answer 2

如果您的意思是左側的一點點空間，那麼我會認爲加入left: 0;會解決問題。

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    border: 1px solid red; 
    text-align: center; 
    margin: 0; 
    left: 0; 
} 

您需要注意，因爲您將寬度設置爲100％，並且還設置了使div寬於100％的邊框。

Answer 3

我懷疑這是對身體

body { 
    margin: 0; 
} 

將修復它默認的利潤率/填充。

Answer 4

刪除border: 1px solid red;並將left: 0;添加到#footer。

這裏是JSFiddle。

Answer 5

更改width: 100%到

left: 0; 
right: 0; 

因此，這將成爲：http://jsfiddle.net/pR4P5/6/

完全CSS：

#footer { 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right: 0; 
    border: 1px solid red; 
    text-align: center; 
    margin: 0; 
} 

結果將是100％的寬度，而你可以保持您1px的邊界。 注意，當定義寬度100％並添加邊框時，您可能會更好地將box-sizing添加到邊框。 此外，margin: 0;身體是避免頭痛的好方法。

（box-sizing: content-box; - http://quirksmode.org/css/user-interface/boxsizing.html）

Answer 6

嘗試用left: 0;更換margin: 0;。這應該將div鎖定在頁面的左側，並將其居中。我也不會使用邊框，它將在寬度和高度上添加一些像素，使其不那麼居中。我只會使用border-top: 1px solid red;。

希望我幫你解決了煩人的問題。

Answer 7

Paulie_D的回答是正確的，您需要將margin：0添加到body。我想你會覺得它沒有正確居中，因爲頁腳邊框。

嘗試增加：

box-sizing: border-box; 

到您的頁腳元素。

Answer 8

要中心股利：

html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

爲了保持邊界在定位包括，太：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

DEMO：http://jsfiddle.net/pR4P5/8/

閱讀中號礦點：

CSS復位：http://meyerweb.com/eric/tools/css/reset/

箱尺寸：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing