CSS - How to horizontally center table whos position is absolute

Question

I have a 5 html pages with the same code. Say this is the code:

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

all the 5 pages link to the same external CSS file which is just this:

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

On each of the 5 pages, I inserted a table, like so

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

The table has only one row. In the one row, I need to pick a random number from 1-10, and that is how many td's the row is going to have. So the first html page can have 2 td's, the second can have 6td's, etc. I need to make it so that the vertical position of the table is the same throughout all pages but the table must be horizontally aligned. I have to use position absolute since other users might type a few paragraphs before the table on some pages, and on some pages, there might not be any additional paragraphs so in order for me to have the same vertical position of the table, I need position absolute. How do I make it so that every table is horizontally centered? By horizontally aligned, I mean that every table has an even amount of white space on the left And the right regardless of how many td's the table has.

margin: 0 auto;

doesn't work for me. Note that I am not using CSS3 and am using IE8.

Answer 1

margin: 0 auto wont work for absolute positioned elements. What you need to do is absolute position it in the middle. You accomplish this by moving it left 50%; and then adjusted the left margin to negative half of the elements width

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

this will center it in the middle of its parent

ps. make sure the parent containers position is set to relative

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