CSS 表格行内垂直居中

在本文中，我们将介绍如何在 HTML 表格的行中使用 CSS 实现垂直居中。

阅读更多：CSS 教程

什么是表格行内垂直居中？

在 HTML 中，表格是用于展示数据和布局内容的一种常用元素。表格由行（tr）和列（td）组成。通常情况下，表格的每个单元格里的内容是水平居中的，但它们的垂直对齐方式可能不同。表格行内垂直居中就是指如何将表格行中的内容在垂直方向上居中显示。

方法一：使用行高和垂直居中的 CSS 属性

一种常用的方法是使用行高和垂直居中的 CSS 属性来实现垂直居中。首先，我们可以设置表格行的高度为一个确定的值，并将其行高设置为与表格行高相等的值。

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid #ccc;
        padding: 10px;
    }
    .center {
        height: 100px;
        line-height: 100px;
        vertical-align: middle;
    }
</style>  
<table>
    <tr>
        <td class="center">居中显示的内容</td>
    </tr>
</table>

在上述代码中，我们为表格行设置了一个高度为100px，并将其行高设置为与表格行高相等的值，这里是100px。接着，通过使用 vertical-align: middle; 属性，我们将表格行内的内容垂直居中显示。

方法二：使用 Flexbox 属性

由于传统的 CSS 方法在某些情况下可能会无法正常工作，我们可以使用 Flexbox 属性来实现表格行内的垂直居中。Flexbox 属性是 CSS3 引入的新的布局模型，它提供了更加灵活和强大的布局功能。

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid #ccc;
        padding: 10px;
        display: flex;
        align-items: center;
    }
</style>  
<table>
    <tr>
        <td>居中显示的内容</td>
    </tr>
</table>

在上述代码中，我们为表格的列设置了 display: flex; 属性，告诉浏览器该列将使用 Flexbox 布局。然后，使用 align-items: center; 属性将表格列内的内容垂直居中显示。

方法三：使用表格结构

CSS 中的表格布局提供了一种将元素组织成表格的方式。尽管它与传统的 HTML 表格元素不同，但我们仍然可以使用 CSS 的表格布局来实现表格行内的垂直居中。

<style>
    .table {
        display: table;
        width: 100%;
    }
    .table-row {
        display: table-row;
    }
    .table-cell {
        display: table-cell;
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>
<div class="table">
    <div class="table-row">
        <div class="table-cell">居中显示的内容</div>
    </div>
</div>

在上述代码中，我们使用了自定义的类名 .table、.table-row 和 .table-cell 来模拟 HTML 表格结构。通过将 .table 设置为 display: table;，.table-row 设置为 display: table-row;，以及 .table-cell 设置为 display: table-cell;，我们可以模拟出 HTML 表格的行和单元格。然后使用 vertical-align: middle; 属性将内容垂直居中。