经过大量尝试和搜索，我从未找到使用CSS2的令人满意的方法。

一种简单的实现方法是将其包装到一个方便的<table>中，如下面的示例所示。我们知道如何避免表格布局以及避免古怪的技巧吗？

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

我想知道的是如何在没有固定宽度的情况下也成为一个块。

解决方案

回答

这将是最无聊的答案，但它的工作原理是：

使用不推荐使用的<center>标签。

：P

我告诉过你那会很la脚。但是，就像我说的那样，它有效！

不寒而栗

回答

@Jason，是的，<center>起作用。美好的时光。我将提出以下建议：

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

EDIT @Santi，一个块级元素将填充父容器的宽度，因此它实际上将是" width：100％"，并且文本将在左侧流动，从而给我们留下无用的标记和不居中的元素。我们可能要尝试使用display：inline-block;。 Firefox可能会抱怨，但这是正确的。另外，尝试在.my-centered-content` DIV的CSS中添加一个" border：solid red 1px;"，以查看尝试这些操作时发生了什么。

回答

我认为，如果我们使用<div>而不是<table>，那么示例也将同样有效。唯一的区别是<table>中的文本也居中。如果也需要，只需添加text-align：center;即可。规则。

要记住的另一件事是，默认情况下，<div>将填充所有可用的水平空间。如果不确定边框的开始和结束位置，请在其上放置边框。

回答

以下工作足够好。注意位置，并使用自动

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

注意：不确定它是否可以在IE中使用。

回答

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}

<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>

回答

在FF3中，我们可以：

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

这样做的好处是可以使用任何语义上最有意义的元素(在适当的情况下，用更好的东西替换div)，但缺点是它在IE中失败(grr ...)

除此之外，不设置宽度，最好的选择是使用JavaScript精确定位左侧边缘。不过，我不确定我们是否会将其归类为"古怪的把戏"。

当然，这实际上取决于我们想做什么。给定我们简单的测试用例，具有text-align：center的div将具有完全相同的效果。