Vertically center <table> in <div> dynamically based on row count?

Question

I've created a JS Fiddle to demonstrate my problem: http://jsfiddle.net/pqTqH/

How can I update my CSS so that the table is vertically centered without setting the height of the table or a top-margin? I want the table to remain centered even when there is only 1 row. Ultimately, I just need this to be dynamic so I can add rows to my table via Jquery and the table will remain centered (vertically and horizontally) in the <div>.

NOTE: There will always be at least one row, but no more than 15, so the table should always fit inside the <div>.

Answer 1

There is a simple fix using table-cell, which you hinted at in your fiddle:

#right {
    height: 450px;
    width: 50%;
    background-color: #CCCCFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    color: #333;
    display: table-cell;
    vertical-align: middle;
}

In your original example, you declared float: left and as a result div#right will not behave like a table-cell since its display value is computed to be block, so you lose the vertical alignment control.

Reference: To learn more about computer value of display, see:
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Answer 2

Put your table inside another table, like in the following code sample:

<div id="right">
    <table style="vertical-align: middle; height: 100%; width: 100%;">
        <tr>
            <td>
               // your table
            </td>
        </tr>
    </table>
</div>