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