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

[snoop1979]

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 \[code\]height\[/code\] of the table or a \[code\]top-margin\[/code\]? 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 \[code\]<div>\[/code\]. NOTE: There will always be at least one row, but no more than 15, so the table should always fit inside the .Many thanks in advance!