一、關於水平居中
對於table的水平居中，最常見的方式是通過設置樣式text-align: center來實現。比如：
table {
text-align: center;
}
這個方式比較簡單有效，並且在大多數情況下都可以達到我們的目的。但是需要注意的是，這種方式對於table里的內容也會產生影響。如果不希望裏面的內容也居中，可以給每個單元格添加樣式 text-align: left;
如果需要對表格的某一列進行居中，可以通過為該列的單元格添加樣式text-align:center來實現。比如：
table td:nth-child(5) {
text-align: center;
}
這個樣式會使表格的第五列居中。
二、關於垂直居中
通常情況下，table中的內容都是默認垂直居中的，不需要特別設置。但是對於一些特殊的情況，可能需要我們手動設置單元格的垂直居中。
實現單元格中的文本垂直居中，需要將單元格設置為display:flex，並且設置justify-content:center和align-items:center。比如：
td {
display: flex;
justify-content: center;
align-items: center;
}
這樣設置後，單元格中的文本就會垂直居中了。
三、關於整個table的垂直居中
如果需要整個table垂直居中，可以通過設置table的父元素的display:flex和align-items:center實現。比如：
.container {
display: flex;
align-items: center;
}
table {
margin: 0 auto;
}
這個樣式會使整個table垂直居中以及水平居中。
四、總結
通過上述的方式，可以實現table內容的水平居中、單元格的水平居中以及垂直居中、整個table的水平垂直居中等效果。我們可以根據具體情況，選擇不同的方法來實現我們想要的效果。
原創文章，作者：UCUAG，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/333347.html
微信掃一掃 
支付寶掃一掃 