将外部 div 居中，'text-align:center' 未按预期工作答案

【问题标题】：Centering an outer div, 'text-align:center' not working as expected将外部 div 居中，'text-align:center' 未按预期工作
【发布时间】：2013-01-05 19:20:31
【问题描述】：

我在一个 div 中有一段内容，目前它位于左侧。 Fiddle.

我尝试添加一个容器 div，例如：

<div style='text-align:center; width:100px;'>[content]</div>

但没有运气。也试过这个：

<div style='margin: 0px auto; width:100px;'>[content]</div>

内容仍然左对齐。

这行得通，但我想用 CSS 找到正确的方法：

<div style='width:100px;' align='center'>[content]</div>

感谢您的帮助。我很想用桌子来做这件事，但我需要打破旧习惯！

【问题讨论】：

你的 fiddle 中有很多标记、css 和内联样式；很难回答你的问题。是您要居中的<div class="menu"> 吗？
我想将白色区域居中（圆边）。我不想更改此区域中任何内容的对齐方式 - 只需将整个白色部分居中即可。
这意味着您希望<div class="rounded-corners" style="width: 600px; background-color:#FFFFFF;"> 居中？还是其中的内容要居中？无论哪种方式，您都应该能够以auto 的横向边距或text-align: center 的内容居中，正如许多人在下面指出的那样。
应该是关键词。问题是 text-align:center 在我的示例中不起作用。用表格布局会容易得多，但我需要学习正确的方式。
这就是我指出你的原因 =)

标签： css html centering

【解决方案1】：

将内容用另一个div 包裹在“圆角”内。

并为这个新的 div 写 style="width: 100%; margin: 0 auto;"

【讨论】：

【解决方案2】：

如果您尝试让外部 div 相对于其父级居中（在这种情况下为body），您应该将其横向边距设置为 auto：

body div{
    margin: auto;
}

如你所见here

【讨论】：

@IlanBiala：哇，太有帮助了。你想以什么为中心？
div 而不是内容
好的，效果更好。这是实现我想要的最佳方式吗？是否符合“标准”？
只要我知道这是最好的和更标准的会议方式......而且这是我最近一直在使用的一种。

【解决方案3】：

使 div 居中的工具实际上是margin: 0 auto;。

【讨论】：

居中一个 div，但不是它的内容
你想以什么为中心？
你也可以将它用于内容