CSS表格縱向居中是網(wǎng)頁(yè)設(shè)計(jì)中比較常見(jiàn)的一種效果。下面介紹兩種方法：

tr{
vertical-align: middle;
}

上面的代碼簡(jiǎn)單易懂，將tr的vertical-align屬性設(shè)置為middle即可實(shí)現(xiàn)縱向居中效果。

第二種方法如下：

table{
height: 100%;
}
tbody{
display: table;
margin: auto;
height: 100%;
}
tr{
display: table-cell;
vertical-align: middle;
}

這種方法比較復(fù)雜，但是效果也更加精細(xì)。我們需要設(shè)置table的height屬性為100%，然后讓tbody以table的形式展示，并且用margin:auto來(lái)實(shí)現(xiàn)水平居中。tr則需要將display屬性設(shè)置為table-cell，并且設(shè)置vertical-align屬性為middle。

通過(guò)上述兩種方法的學(xué)習(xí)，我們可以輕松實(shí)現(xiàn)表格的縱向居中效果，優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)，讓網(wǎng)頁(yè)更加美觀。