今天，我們將討論如何使用 CSS 實現單元格內垂直居中。這是一個經常出現的需求，例如在表格中的單元格中垂直居中文本。 首先，讓我們看一下在 HTML 表格中單元格中的垂直居中是如何實現的。在傳統的 HTML 表格中，可以使用 valign 屬性來指定單元格中的內容應該如何垂直對齊，如下所示：

<table>
<tr>
<td valign="middle">垂直居中</td>
</tr>
</table>

但是，在現代的 Web 開發中，我們已經不再使用這種方法了。相反，我們使用 CSS 來控制單元格的對齊方式。以下是一些使用 CSS 實現單元格內垂直居中的方法。 1. 使用 line-height 屬性 這是一種最簡單的方法，只需要設置單元格中文本的 line-height 屬性等于單元格的高度。這樣就可以實現單元格中文本的垂直居中。

<table>
<tr>
<td class="centered">垂直居中</td>
</tr>
</table>
<style>
.centered {
height: 100px;
line-height: 100px;
}
</style>

2. 使用 flexbox 使用 flexbox 可以更方便地控制單元格中的文本的位置。可以將單元格設置為 display:flex 并使用 align-items:center 將其垂直居中。

<table>
<tr>
<td class="centered">垂直居中</td>
</tr>
</table>
<style>
.centered {
height: 100px;
display: flex;
align-items: center;
}
</style>

3. 使用 grid 使用 grid 同樣可以實現單元格中的文本的垂直居中。通過將單元格設置為 display:grid，然后使用 align-items:center 將單元格中的文本垂直居中。

<table>
<tr>
<td class="centered">垂直居中</td>
</tr>
</table>
<style>
.centered {
height: 100px;
display: grid;
align-items: center;
}
</style>

總結 以上就是一些使用 CSS 實現單元格內垂直居中的方法。雖然這些方法不一定是唯一的，但它們都是相對簡單和易于實現的。希望這篇文章能對你幫助。