CSS - 如何将绝对位置的表格水平居中

Question

我有 5 个具有相同代码的 html 页面。说这是代码：

<div id='generic'>
</div>

所有 5 个页面都链接到同一个外部 CSS 文件，就是这样：

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

在 5 页的每一页上，我都插入了一个表格，就像这样

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

表格只有一行。在一行中，我需要从 1-10 中选择一个随机数，这就是该行将有多少个 td。所以第一个 html 页面可以有 2 个 td，第二个可以有 6 个 td，等等。我需要使表格的垂直位置在所有页面中都相同，但表格必须水平对齐。我必须使用绝对位置，因为其他用户可能会在某些页面上的表格之前键入几段，而在某些页面上，可能没有任何其他段落，所以为了让我有相同的表格垂直位置，我需要绝对位置。如何使每个表格水平居中？通过水平对齐，我的意思是每个表的左侧和右侧都有均匀数量的空白，无论该表有多少 td。

margin: 0 auto;

对我不起作用。请注意，我使用的不是 CSS3，而是 IE8。

Answer 1

margin: 0 auto 不适用于绝对定位元素。您需要做的是将其绝对定位在中间。您通过将其向左移动 50% 来完成此操作；然后将左边距调整为元素宽度的负一半

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

这将使它在其父级的中间居中

ps。确保父容器位置设置为相对

http://jsfiddle.net/s7Gmm/3/