将具有自动边距的 div 居中时是否需要宽度？答案

【问题标题】：Is width necessary when centering a div with margin auto?将具有自动边距的 div 居中时是否需要宽度？
【发布时间】：2011-12-14 20:52:11
【问题描述】：

我尝试使用 margin: auto 使我的 div 居中，如下所示：

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

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

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

那么，让 div 居中需要宽度吗？我认为 div 的宽度应该由其内部内容自动修改？（在这种情况下，我在控制面板 div 中有一个按钮）

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

【问题讨论】：

非常感谢大家。我有另一个相关的问题：如何在 div 中居中按钮？如果我指定按钮的宽度，它将不自然地比我预期的要长。
input type="button" 或 input type="submit" 是内联元素，因此您可以在父元素上使用样式 text-align:center; 将其居中。当然，鉴于您在 div 中没有其他任何干扰。
是的，这里有一个例子jsfiddle.net/jTd7e

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

是的，当使用margin-left/margin-right:auto;时，你必须为div指定一个宽度。

如果没有宽度，div 自然会有 auto 宽度，因此它是居中对齐的，但你无法判断它是否填充了容器。

【讨论】：

【解决方案3】：

是的，这是必要的。

div 宽度的默认值为auto，这意味着它将尝试水平占用所有可用空间。由于两边没有边距，因此自动边距为零。

【讨论】：

【解决方案4】：

是的，如果你想让他在 center 中，你必须 define width 到你的 div 中

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

.parent{
 text-align:center;
} 

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

【讨论】：

【解决方案5】：

是的，宽度是必需的，试试这个：

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

【讨论】：