为什么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