当使用自动边距居中div时，宽度是必需的吗？

Question

我试着将我的div放在正中，像这样使用margin: auto：：

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

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

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

那么，使div居中是否需要宽度呢？我认为div的宽度应该由它的内部内容自动修改？(在本例中，我在控制面板div中有一个按钮)

结果是在最新的Chrome下测试的。

Answer 1

是的，如果你想让他出现在center中，你必须通过define width转到你的div

但是如果你不想要固定的宽度，那么只需要在父div中定义text-align:center，然后像这样定义display:inline-block：

.parent{
 text-align:center;
} 

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

检查此http://jsfiddle.net/sandeep/HzuYv/

Answer 2

是的，这是必要的。

div的宽度的默认值是auto，这意味着它将尝试按时间顺序占用所有可用的空间。由于没有在边上留下边距，因此自动边距将为零。

Answer 3

默认情况下，div元素总是自动的(100%宽于父容器)。您想要居中该元素，并设置了margin:0 auto，它将居中，但您不会注意到它，因为它是100%宽的。

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