[分享]css3垂直居中tr

CSS3提供了许多方法来垂直居中元素，在本文中我们将探讨如何使用CSS3来垂直居中HTML表格(tr)。首先，我们需要了解垂直居中的基本原则：父容器的高度必须被确定。因此，为了垂直居中一个tr元素，我...

CSS3提供了许多方法来垂直居中元素，在本文中我们将探讨如何使用CSS3来垂直居中HTML表格(tr)。

首先，我们需要了解垂直居中的基本原则：父容器的高度必须被确定。

因此，为了垂直居中一个tr元素，我们需要使其父元素(即表格tbody)的高度被确定。一个比较简单的解决方案是设置tbody的display为table，同时设置其height为100%。

 tbody {
        display: table;
        height: 100%;
    } 

接下来，我们需要使tr元素相对于tbody垂直居中。我们可以使用CSS3的flex布局来实现这个目标。具体来说，我们可以将tbody的display属性设置为flex，并使用align-items属性居中tr元素。

 tbody {
        display: flex;
        height: 100%;
        align-items: center;
    } 

鉴于一些浏览器对于flex布局的支持不够完善，上述方法可能会出现一些问题。因此，我们可以使用另一种基于表格布局的垂直居中方法。具体来说，我们可以为tbody设置display属性为table，在其内部再创建一个单元格(td)并将其垂直居中，最后将tr元素放入该单元格中。

 tbody {
        display: table;
        height: 100%;
    }
    td {
        display: table-cell;
        vertical-align: middle;
    } 

总的来说，在CSS3中垂直居中tr元素涉及到两个关键点：确定父容器的高度和使用布局技巧在其中垂直居中tr元素。