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。

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/