当您事先不知道内容块的宽度时，将其居中

Question

经过多次尝试和搜索，我从未找到一种令人满意的方法来使用 CSS2 来做到这一点。

实现它的一个简单方法是将其包装成一个方便的 <table> 如下例所示。您知道如何避免表格布局并避免奇怪的技巧吗？

table {
  margin: 0 auto;
}

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

---

我想知道的是如何在没有固定宽度并且也是块的情况下做到这一点。

Answer 1

@杰森，是的， <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>

编辑 @Santi，块级元素将填充父容器的宽度，因此它实际上是 width:100% 并且文本将在左侧流动，留下无用的标记和不居中的元素。你可能想尝试 display: inline-block;. 。Firefox 可能会抱怨，但是 这是正确的. 。另外，尝试添加一个 border: solid red 1px; 的 CSS .my-centered-content DIV 来看看当你尝试这些事情时发生了什么。

Answer 2

这将是最蹩脚的答案，但它有效：

使用已弃用的 <center> 标签.

：P

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

*不寒而栗*

Answer 3

我认为如果您使用 <div> 而不是 <table>，您的示例也会同样有效。唯一的区别是 <table> 中的文本也是居中的。如果你也想要这样，只需添加文本对齐：中心;规则。

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

Answer 4

下面的方法就足够好了。请注意 位置, ，以及使用 汽车

<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 中是否有效。

Answer 5

在FF3中，您可以：

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

这样做的优点是可以使用任何最有语义意义的元素（如果合适的话，用更好的东西替换 div ），但缺点是它在 IE 中失败（grr ...）

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

当然，这实际上取决于您想做什么。给定您的简单测试用例，一个带有文本对齐的 div：中心会产生完全相同的效果。

Answer 6

#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>