Question

经过多次尝试和搜索，我从来没有找到过用CSS2做到的令人满意的方法。

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

table {
  margin: 0 auto;
}

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

我想知道的是如何在没有固定宽度的情况下进行操作并且也是一个块。

Answer 1

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

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

Answer 2

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

Use the deprecated <center> tag

：P

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

* *不寒而栗

Answer 3

如果您使用＆lt; div＆gt;，我认为您的示例也可以正常工作而不是＆lt; table＆gt;。唯一的区别是＆lt; table＆gt;中的文字。也是中心。如果你也想要，只需添加text-align：center;规则。

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

Answer 4

以下效果很好。注意位置，以及 auto

的使用

<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

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

Answer 6

在FF3中，你可以：

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

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

除此之外，如果不设置宽度，最好的办法是使用javascript精确定位左边缘。不过，我不确定你是否认为这是一个“古怪的伎俩”。

当然，这取决于你想做什么。鉴于您的简单测试用例，具有text-align：center的div将具有完全相同的效果。

如果您事先不知道其宽度，请将一个内容块居中

6 个答案: