为啥这个 DIV 不居中？ [复制]

Posted 2023-03-05

【中文标题】为啥这个 DIV 不居中？ [复制]

【英文标题】：Why isn't this DIV centered? [duplicate]为什么这个 DIV 不居中？ [复制]

【发布时间】：2014-03-28 01:10:55

【问题描述】：

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

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

margin: 0;

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

【问题讨论】：

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

【参考方案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/

阅读更多：

CSS 重置：http://meyerweb.com/eric/tools/css/reset/

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