<div>表格居中是指將表格元素在頁面中居中顯示。在web開發中，我們常常會用到表格來展示數據，而使表格居中顯示可以提升頁面的美觀度和可讀性。本文將通過幾個代碼案例詳細解釋如何使用div元素來實現表格居中的效果。
第一個案例是使用margin屬性來居中表格。我們可以通過設置左右margin為auto來實現水平居中，然后再通過設置上下margin為0來實現垂直居中。代碼如下：

<pre>html
<div style="width: 300px; margin: 0 auto;">
<table>
<!-- 表格內容 -->
</table>
</div>

第二個案例是使用flex布局來居中表格。我們可以通過設置父元素的display為flex，并使用justify-content和align-items屬性來使子元素水平和垂直居中。代碼如下：

<pre>html
<div style="display: flex; justify-content: center; align-items: center;">
<table>
<!-- 表格內容 -->
</table>
</div>

第三個案例是使用grid布局來居中表格。我們可以通過設置父元素的display為grid，并使用place-items屬性來使子元素水平和垂直居中。代碼如下：

<pre>html
<div style="display: grid; place-items: center;">
<table>
<!-- 表格內容 -->
</table>
</div>

以上三個案例展示了使用div元素實現表格居中的不同方法，開發者可以根據具體需求選擇適合自己的方法。除了使用div元素外，還可以使用其他html元素或CSS屬性來實現類似的效果。總之，表格居中是一個常見需求，通過合適的布局和樣式設置，可以輕松實現表格的居中顯示，提升頁面的美觀度和可讀性。
參考文獻： - [CSS布局技巧之水平垂直居中](https://www.zhangxinxu.com/wordpress/2018/10/css-layout-horizontal-vertical-center/)