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，第二个可以有 6td，依此类推。我需要使表格的垂直位置在所有页面中都相同，但表格必须水平对齐。我必须使用绝对位置，因为其他用户可能会在某些页面上的表格之前键入几个段落，而在某些页面上，可能没有任何额外的段落，因此为了让我具有相同的表格垂直位置，我需要绝对位置。如何使每个表都水平居中？通过水平对齐，我的意思是每个表在左侧和右侧都有均匀数量的空白，无论表有多少个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*/
}

这会将其居中在其父级的中间

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

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