CSS中,表格居中可以通過設置元素的margin屬性來實現。
/* 使表格位于容器中心 */ table { margin: auto; }
上述代碼中,我們使用了margin:auto;將表格水平居中。這個屬性可以使元素自動居中,但一定要設置width。
如果要使垂直方向也居中,我們可以把這個表格放到一個容器中,使用display: flex和align-items:center來實現居中效果。
.container { display: flex; align-items: center; justify-content: center; /* 水平居中 */ height: 100vh; /* 保持容器高度 */ } table { margin: 0; /* 取消默認margin */ }
上述代碼中,我們通過設置.container為display:flex來指定布局方式,align-items:center來實現垂直居中效果,justify-content:center來實現水平居中效果。同時,我們取消了table的默認margin以保持居中效果。