html - 垂直居中动态基于行数？ 我创建了一个 JS Fiddle 来演示我的问题：http: //jsfiddle.net/pqTqH/ 如何更新我的 CSS 以使表格垂直居中而不设置height表格或 a top-margin？即使只有 1 行，我也希望表

Question

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

如何更新我的 CSS 以使表格垂直居中而不设置height表格或 a top-margin？即使只有 1 行，我也希望表格保持居中。最终，我只需要它是动态的，这样我就可以通过 Jquery 将行添加到我的表中，并且该表将保持居中（垂直和水平）在<div>.

注意：总是至少有一行，但不超过 15 行，因此表格应始终放在<div>.

Answer 1

有一个简单的修复 using table-cell，您在小提琴中暗示过：

#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: leftand 因此div#right不会像 a 那样表现，table-cell因为它的display值被计算为 be 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

我通常通过 jQuery 中的 onload/window.resize 事件来执行此操作，因为我不必更改 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');
}

我已经使用 jquery onload 事件更新了您的 jsFiddle 示例。如果您不关心窗口调整大小，您可以在 onload 事件中运行一次代码。通过不使用 2 个变量，这也可以缩短为 1 个衬里。