CSS中的表格垂直居中是一个常见的问题。在许多情况下,我们需要将表格中的内容垂直居中,从而使页面看起来更加美观和整洁。在这篇文章中,我们将讨论几种常见的方法,帮助你实现表格的垂直居中。/* 方法 1:使用 display: table-cell 和 vertical-align */
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
/* 在 HTML 中使用以下代码 */
<div class="table">
<div class="table-row">
<div class="table-cell">内容 1</div>
<div class="table-cell">内容 2</div>
<div class="table-cell">内容 3</div>
</div>
</div> 使用 display: table-cell 和 vertical-align 可以让表格中的内容垂直居中。这种方法需要将表格的整体结构用 div 包裹起来,并使用 display: table、display: table-row 和 display: table-cell 来定义单元格的排列方式,然后使用 vertical-align: middle 将内容垂直居中。 /* 方法 2:使用 line-height 和 height */
.cell {
height: 100px;
line-height: 100px;
}
/* 在 HTML 中使用以下代码 */
<div class="cell">内容</div> 使用 line-height 和 height 可以让单元格中的内容垂直居中。这种方法需要设置单元格的高度为固定值,并使用和高度相同的 line-height 值来使文本垂直居中。 /* 方法 3:使用 transform */
.cell {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 在 HTML 中使用以下代码 */
<div class="cell">内容</div> 使用 transform 可以让单元格中的内容垂直居中。这种方法需要设置单元格的 position 属性为 relative,然后使用 top: 50% 将其移动到纵向的中央位置,最后使用 transform: translateY(-50%) 将其移回到垂直居中的位置。 |