<div>、<tr>、<td> 是 HTML 標簽中常用的標簽，它們分別用于創建網頁布局的塊級元素（div）和表格元素（tr、td）。在網頁設計中，經常會遇到需要將這些元素居中顯示的情況，這篇文章將詳細介紹如何使用 CSS 在 HTML 中實現 div、tr 和 td 的居中效果。
在使用 CSS 實現居中效果時，可以使用不同的屬性和技巧來實現。下面將通過幾個代碼案例來解釋具體的實現方式。
第一個實例是使用 div 實現居中布局。要想實現居中布局，可以使用 margin 屬性來設置盒子的外邊距。讓我們來看一個例子：

要實現水平居中，可以將左右外邊距設置為 auto；要實現垂直居中，可以將上下外邊距設置為 auto。下面是一個簡單的例子，實現了一個居中的 div 節點：

<code><style>
.centered-div {
width: 300px;
height: 200px;
background-color: lightgray;
margin: auto;
}
</style>
<br>
    <div class="centered-div">
<h1>居中的 div</h1>
</div></code>

在上面的代碼中，我們創建了一個名為 centered-div 的類，給 div 設置了寬度和高度，并設置了背景顏色為 lightgray。通過將 margin 屬性設置為 auto，使得 div 在水平和垂直方向上都居中顯示。

接下來，我們將介紹如何使用 CSS 實現表格元素的居中。表格常用于展示數據，而數據居中對于閱讀和使用來說是非常重要的。下面是一個使用 CSS 居中 <tr> 元素的例子：

在 CSS 中，可以使用 text-align 屬性來設置元素中文本的對齊方式，通過將其設置為 "center"，可以實現水平居中。下面是一個示例：

<code><style>
tr {
text-align: center;
}
</style>
<br>
    <table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table></code>

在上面的代碼中，我們將 tr 標簽的 text-align 屬性設置為 center，以實現所有單元格中文本的水平居中效果。

最后，讓我們來看一個實例，如何使用 CSS 實現 td 元素的居中效果。td 通常用于表格中的單元格，同樣需要居中顯示內容。下面是一個實現 td 內容居中的例子：

為了實現 td 元素中內容的水平居中，我們需要在 td 的樣式中使用 text-align 屬性，并將其設置為 center。下面是一個使用 CSS 居中 td 內容的示例：

<code><style>
td {
text-align: center;
vertical-align: middle;
}
</style>
<br>
    <table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table></code>

在上面的代碼中，我們除了將 td 元素的 text-align 屬性設置為 center，還將 vertical-align 屬性設置為 middle，以實現內容在垂直方向的居中效果。

通過這些代碼案例，我們詳細介紹了如何使用 CSS 在 HTML 中實現 div、tr 和 td 的居中效果。不同的元素需要使用不同的屬性和技巧來實現居中布局，但總體思路是通過合適的樣式設置來控制元素在水平和垂直方向的居中顯示。