在Firefox中居中一个相对定位的元素，其宽度未知

Question

我有一个未知宽度的块级元素。此元素需要在页面上水平居中，其position必须为relative，以便其绝对定位的子项将显示在正确的位置。你可以see it in action here。

据我所知，将未知宽度的元素居中的最佳方法是将其display设置为table。在语义上，这似乎是不正确的，因为我的元素与真实表没有任何共同之处。更糟糕的是，Firefox doesn't apply position to tables，所以绝对定位的孩子出现在错误的位置：

是否有任何解决方法：

• 不要向html添加任何额外元素
• 不使用JavaScript计算和设置元素的宽度

我想要一个纯粹的CSS修复，而且我的想法已经用完......

Answer 1

将display: inline-block;添加到元素（#box）就足够了。这将使它成为内联元素，并仍然保持其“四四方方”属性。它的宽度会自动占据孩子的宽度。

然后，您可以通过在其父级上设置text-align: center;来设置其对齐方式。

IE7不支持此display值（仅适用于自然内联元素），但情况与table相同（根本不支持）。 You can use a hack though to make inline-block work in IE7.

jsFiddle Demo

Answer 2

如果最糟糕的情况发生，你可以试试text-align: -moz-center;这是一种特定于Firefox的方法，可以像内联元素那样使用块元素。