CSS 中的 th 文字居中顯示
在 HTML 表格中，元素表示表頭單元格。對于表頭單元格，通常需要把文字居中顯示，來使表格更加美觀。下面我們來介紹如何使用 CSS 來實現文字居中顯示。
1.使用 text-align 屬性
text-align 屬性用于設置文字在元素中的水平對齊方式。對于表格的每個表頭單元格 ，我們可以使用以下樣式代碼來將文字居中顯示：
th {
text-align: center;
}
2.使用 vertical-align 屬性
vertical-align 屬性用于設置元素內部內容的垂直對齊方式。對于表格的每個表頭單元格 ，我們可以使用以下樣式代碼來將文字垂直居中顯示：
th {
vertical-align: middle;
}
3.使用 display 和 flex 屬性
我們可以利用 display 和 flex 屬性來設置單元格中的元素居中。對于表格的每個表頭單元格 ，我們可以使用以下樣式代碼來將文字居中顯示：
th {
display: flex;
justify-content: center;
align-items: center;
}
以上三種方法都能實現文字居中顯示，具體使用哪種方法取決于具體需求。下面的示例展示了三種方法的具體效果：
顯示效果：
| 姓名 | 年齡 |
|----------|----------|
| 張三 | 22 |
| 李四 | 25 |
代碼示例：
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>
<style>
th {
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
</style>上面的代碼使用了三種方法來使表頭單元格中的文字居中顯示。第一種方法使用了 text-align 屬性，第二種方法使用了 vertical-align 屬性，第三種方法則利用了 display 和 flex 屬性。這些方法都可以輕松地實現表格中的文字居中顯示，更好地展示頁面內容。上一篇css th左邊偏移
下一篇css text兩端對齊