想要在網頁上設計一個漂亮的表格，表格的居中顯示是非常關鍵的。CSS樣式能夠幫助我們輕松實現這個目標。在本篇文章中，我們來學習CSS怎么讓表格居中。
首先，在HTML代碼中添加一個簡單的表格：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</tbody>
</table>
接下來，在CSS中進行設置。為了讓表格水平居中，我們需要在
標簽上添加以下CSS屬性：
table {
margin: 0 auto;
}
這里的“margin: 0 auto;”表示表格的左右兩側外邊距自動填充，實現水平居中。
但此時表格還處于頂部位置，如果希望表格居中顯示，可以設置整個網頁的寬度與高度為100%，然后讓表格所在容器元素的高度等于整個網頁的高度。
html,body{
width:100%;
height:100%;
}
.container{
width:80%;
height:100%;
margin:0 auto;
}
這樣就能讓整個表格居中顯示了。
如果希望表格在網頁中沿著垂直方向居中顯示，還需要再添加以下代碼：
.container{
display:flex;
justify-content:center;
align-items:center;
}
這里的“display:flex;”表示設置容器元素的彈性布局模式，這樣表格就可以實現垂直居中了。
至此，我們已經掌握了如何讓表格在網頁中實現水平居中以及垂直居中的方法，希望可以對您的網頁設計有所幫助。
