本文目錄導讀：

1. 水平居中
2. 垂直居中
3. 整體居中（水平和垂直）

如何用CSS將網(wǎng)頁元素居中展示

在網(wǎng)頁設計中，使用CSS將元素居中展示是一個常見的需求，這不僅可以提升頁面的視覺效果，還能幫助用戶更好地理解和使用頁面內容，下面介紹幾種常見的用CSS將元素居中的方法。

水平居中

水平居中是讓元素在水平方向上居中顯示，可以通過設置元素的margin屬性或者使用flex布局來實現(xiàn)，使用margin屬性：

.table-class {
  margin: 0 auto; /* 左右邊距自動調整，實現(xiàn)水平居中 */
}

或者使用flex布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中對齊 */
}

垂直居中

垂直居中是讓元素在垂直方向上居中顯示，可以通過設置元素的position屬性或者使用CSS的transform屬性來實現(xiàn)，使用position和transform屬性：

.table-class {
  position: absolute; /* ***定位 */
  top: 50%; /* 距離頂部為容器高度的一半 */
  transform: translateY(-50%); /* 向上移動自身高度的一半，實現(xiàn)垂直居中 */
}

整體居中（水平和垂直）

若需要讓元素在整個頁面中居中（即水平和垂直方向都居中），可以結合使用上述兩種方法，使用flex布局結合transform屬性：

.container {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中對齊 */
  align-items: center; /* 垂直居中對齊 */
  height: 100vh; /* 設置容器高度為視窗高度，確保元素在整個頁面中居中 */
}

通過以上方法，你可以輕松使用CSS將網(wǎng)頁元素（包括表格）居中展示，需要注意的是，這些方法在不同的布局和場景下可能會有不同的應用方式，需要根據(jù)實際情況選擇***適合的方法，對于復雜的布局需求，可能需要結合使用多種CSS技術來實現(xiàn)。