在前端開發中，表格是常用的一種元素，而表格的美觀性和易讀性也非常重要。其中，表格的水平居中是一個比較常見的問題，那么，如何實現 CSS 中的表格水平居中呢？
在實現表格水平居中之前，我們需要首先了解一下 CSS 的表格居中布局。可以通過設置 table 元素的 margin 屬性來實現相關功能，例如下面代碼中設置了橫向居中和下方留白：
pre {
background: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
}
p {
text-align: center;
}
pre code {
background: none;
border: none;
padding: 0;
}
table {
border-collapse: collapse;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
}
上述代碼中，設置了 table 元素的 margin 屬性，將其橫向居中，并在下方留出了一定的留白，使表格看起來更為美觀。
如果我們想要表格中的內容也居中對齊，那么，我們需要設置每個單元格（td 或 th）的 text-align 屬性為 center，例如下面代碼：
pre {
background: #f4f4f4;
border: 1px solid #ddd;
padding: 10px;
}
p {
text-align: center;
}
pre code {
background: none;
border: none;
padding: 0;
}
table {
border-collapse: collapse;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
}
th, td {
text-align: center;
border: 1px solid #ddd;
padding: 5px;
}
上述代碼中，我們為 th 和 td 元素設置了 text-align 屬性，將其內容也居中對齊，同時為表格中的每個單元格設置了一定的 border 和 padding 字段，使表格看起來更加整潔。
這樣，我們就成功地實現了 CSS 中的表格水平居中，讓表格看起來更加美觀易讀。
| Name | Age | Gender |
|---|---|---|
| Tom | 20 | Male |
| Jerry | 18 | Male |
上一篇css中背景寫什么