为什么这个 DIV 不居中？ [复制]答案

【问题标题】：Why isn't this DIV centered? [duplicate]为什么这个 DIV 不居中？ [复制]
【发布时间】：2014-03-28 01:10:55
【问题描述】：

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

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

margin: 0;

但什么都没有。我错过了什么？

【问题讨论】：

div 是 100% 宽的......它怎么会不居中？您指的是锚链接吗？

标签： html css

【解决方案1】：

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

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

您需要注意，因为您将宽度设置为 100%，并且还设置了使 div 宽于 100% 的边框。

【讨论】：

【解决方案2】：

我怀疑这是正文的默认边距/填充

body {
    margin: 0;
}

会解决的。

【讨论】：

【解决方案3】：

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

这里是JSFiddle。

【讨论】：

【解决方案4】：

将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% 宽度，而您可以保持 1 像素的边框。请注意，在定义宽度 100% 并添加边框时，最好将 box-sizing 添加到其中。此外，margin: 0; 身体是避免头痛的好方法。

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

【讨论】：

【解决方案5】：

您需要将 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;
}

祝你有美好的一天，

阿尔伯托

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

Paulie_D 的回答是正确的，您需要在正文中添加 margin: 0。我想你认为它没有正确居中是因为页脚的边框。

尝试添加：

box-sizing: border-box;

到您的页脚元素。

【讨论】：

【解决方案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;
}

演示： http://jsfiddle.net/pR4P5/8/

盒子大小：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【讨论】：