Css 边距：0自动不定心？

我在Chrome、Firefox和Safari中尝试了以下代码，但我的div并没有完全处于中心位置

HTML:

这将在Chrome中生成以下内容：

你可以看到左边的边距比右边的边距大

---

我做错了什么？

这是因为正文有边距（浏览器默认）：

您可能需要使用一个新的

---

如果你的窗户更大，看起来应该很正常。在您的屏幕截图中，它类似于：

---

这窗户太窄了。自动边距将图元置于可用空间的中心，如果该空间比图元窄，则该空间将左对齐

---

因此，从左到右，您可以看到body元素上的填充或边距（本例中的边距是Chrome），然后是div的边框，然后是宽度的400px，然后是下一个边框，然后是窗口边缘，因为没有更多的空间来渲染body的右边距。

我在Chrome中无法将按钮居中。给按钮加宽就行了。 但这会导致所有按钮都有宽度的问题

这个补丁在浏览器中似乎玩得很开心。 主要的解决方法是给输入类型按钮一个宽度，这是可行的，但当你有一个大型web应用程序管理所有这些可能是不可行的

找到这个，是的，这是一个黑客，但似乎是在IE7-9 FF铬工作

.submitArea .actButton  {margin-right: auto !important; margin-left: auto !important; display: block;}
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton  {display: inline-block !important;}}  /* chrome hack - needs width for buttons to center */

---

您需要将相对定位添加到css中

.center {
 position:relative;
 width: 400px;
 margin: 0 auto;
 border: 5px solid black;
}

---

这是您的完整

custom.css

文件吗？您的

和

上的

填充

看起来像什么？是的，那是我的完整custom.css文件。我没有意识到html和正文上有默认的填充或空白，所以时间机器的答案修复了它。玩得开心！哦，别忘了在僵尸吃掉你之前点击绿色复选标记，因为今天是万圣节。：）@时间机器：是的，我在等10分钟的分数通过：）。谢谢如果按钮、img、input等出现这种情况，只需将其显示属性设置为block。例如，按钮{display:block}应用

body{margin:0 auto；}

将页面居中可以吗，还是我们应该添加一个带有ID的

div

包装器来避免某种错误？谢谢例如，这里它建议使用#wrapper，并将

text align:center

应用于主体：（但没有很好地解释）

body { margin: 0px; }

.submitArea .actButton  {margin-right: auto !important; margin-left: auto !important; display: block;}
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton  {display: inline-block !important;}}  /* chrome hack - needs width for buttons to center */

.center {
 position:relative;
 width: 400px;
 margin: 0 auto;
 border: 5px solid black;
}