Question

我有一个DIV，我想保持居中并停靠在页面底部。除了它列在右边之外，我几乎已经实现了这一目标。我已经设置jsFiddle来证明问题。

我怀疑我需要调整边距，但到目前为止，我的尝试都没有结果。我尝试添加：

margin: 0;

但没有。我错过了什么？

Answer 1

如果你的意思是左边的一点空间，那么我认为添加left: 0;可以解决这个问题。

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

您需要观看，因为您将宽度设置为100％并设置了使div宽度超过100％的边框。

Answer 2

我怀疑这是身体上的默认边距/填充

body {
    margin: 0;
}

会解决它。

Answer 3

删除border: 1px solid red;并将left: 0;添加到#footer。

这是JSFiddle。

Answer 4

你需要将left设置为0（零）并将box-sizing设置为border-box！

请检查：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 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

尝试将margin: 0;替换为left: 0;。这应该将div锁定在页面的左侧，使其居中。我也不会使用边框，它会在宽度和高度上添加一些像素，使其不那么居中。我只会使用border-top: 1px solid red;。

希望我帮助你解决烦人的问题。

Answer 7

Paulie_D的回答是正确的，你需要在身体上添加保证金：0。我想你会认为它没有正确居中，因为页脚有边框。

尝试添加：

box-sizing: border-box;

到您的页脚元素。

Answer 8

居中 div：

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

为什么这个DIV不居中？

8 个答案: