根据<table> <div> 行数动态垂直居中？

Question

我创建了一个JS Fiddle来演示我的问题:http://jsfiddle.net/pqTqH/

我如何更新我的CSS，使表垂直居中没有设置表的height或top-margin ?我希望表保持居中，即使只有一行。最终，我只需要这是动态的，所以我可以通过Jquery添加行到我的表和表将保持居中(垂直和水平)在<div>。

注意:总是至少有一行，但不超过15行，所以表应该总是适合<div>。

Answer 1

有一个使用table-cell的简单修复方法，您在您的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;
}

在您的原始示例中，您声明了float: left，因此div#right的行为将不像table-cell，因为它的display值被计算为block，因此您失去了垂直对齐控制。

参考:display的计算机价值，参见:
http://www.w3.org/TR/CSS2/visuren.html dis-pos-flo

Answer 2

将表放在另一个表中，如下面的代码示例所示:

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

Answer 3

我通常通过onload/window来实现。因为我不需要改变DOM的布局或与CSS作斗争。

JSFiddle

$(function() {
    centerTable();
    $(window).resize(centerTable);
});
function centerTable()
{
    var right = $('#right');
    var table = $('#right table');
    $('#right table').css('margin-top', ((right.height() - table.height()) / 2) + 'px');
}

我已经更新了你的jsFiddle的例子与jquery onload事件。如果您不关心窗口大小调整，您可以在onload事件中运行一次代码。如果不使用两个变量，也可以将其缩短为1行。