一、关于水平居中
对于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/n/333347.html
微信扫一扫 
支付宝扫一扫 