使用margin auto使div居中时是否需要设置宽度？

Question

我尝试使用margin: auto来居中我的div，代码如下：

#main-container #control-panel {margin: 10px auto;}

但是它仍然靠左对齐。我发现必须为 div 指定一个宽度，这样它才能居中显示：

#main-container #control-panel {width: 300px; margin: 10px auto;}

那么，对于居中一个 div 来说，宽度是否必要？我认为 div 的宽度应该会被其内部内容自动调整？（在这种情况下，控制面板 div 中有一个按钮）

该结果已在最新的 Chrome 浏览器中测试。

- clwen

---

非常感谢大家。我有另一个相关的问题：如何将按钮居中放置在 div 中？如果我指定按钮的宽度，它会比我预期的长度更长。 - clwen

一个 input type="button" 或 input type="submit" 是一个行内元素，所以您可以在父元素上使用样式 text-align:center; 来居中它。当然，前提是您在 div 中没有其他干扰的元素。 - Guffa

是的，这里需要一个例子：http://jsfiddle.net/jTd7e/ - SiriusKoder

Answer 1

是的，这是必要的。

一个div元素宽度的默认值是auto，这意味着它会尝试水平占据所有可用的空间。由于这样在两侧没有留下边距，自动边距将为零。

- Guffa

Answer 2

是的，如果你想要将div居中，就必须为它定义宽度。

但是，如果你不希望给div指定固定宽度，那么只需要在父级div中定义text-align:center，并将其设置为display:inline-block，就像这样：

.parent{
 text-align:center;
} 

.child{
 display:inline-block;
 text-align:left;
}

检查这个http://jsfiddle.net/sandeep/HzuYv/。

- sandeep

Answer 3

元素默认情况下始终是auto（父容器的100%宽度）。如果要居中该元素，并设置margin:0 auto，则它将被居中，但由于它是100%宽度，您看不到它被居中了。

这就是为什么它看起来没有居中的原因 :)

- MarioRicalde

---

默认宽度实际上不是 100%，而是 auto。 - Guffa

是的，从技术上讲是正确的。但是用百分比来解释会更容易理解，而不是说“它和父容器一样宽”。我更新了我的答案以反映这一点。 - MarioRicalde

Answer 4

是的，当使用margin-left/margin-right:auto;时，您必须为

指定一个宽度。

如果没有宽度，

自然具有auto宽度，因此它居中对齐，但由于它填充容器，您无法看到它。

- Curtis

---

默认宽度实际上不是 100%，而是 auto。 - Guffa

公正的观点@Guffa。我应该声明我不是说字面上的"width: 100%"，而是它填满其容器的100%。 - Curtis

Answer 5

是的，width 是必要的，请尝试这个：

#control-panel { width=970px;margin: 0 auto;}

- kapillohakare