要实现将内容垂直居中显示在使用 display: table-cell 的元素中，可以使用以下 CSS 属性和值的组合：
〓〓css代码如下：〓〓
.table-cell {
display: table-cell;
vertical-align: middle;
}
通过将 vertical-align 属性设置为 middle ，可以将内容在垂直方向上居中对齐。这个属性用于控制表格单元格中内容的垂直对齐方式。
土嘎嘎技术网友情提示：要使此方法生效，必须将父级（例如包含 .table-cell 元素的元素）的高度设置为适当的值，以便在垂直方向上有足够的空间来实现居中对齐。通常使用的方法是使用固定高度或百分比高度。
下面土嘎嘎小编分享一个示例，展示了如何使用 display: table-cell 和 vertical-align: middle 来实现内容的垂直居中：
〓〓html代码如下：〓〓
<div class="table">
<div class="table-cell">
垂直居中文本
</div>
</div>
〓〓css代码如下：〓〓
.table {
display: table;
width: 100%;
height: 200px; /* 或者设置为百分比高度 */
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center; /* 可选，水平居中对齐 */
}
在上面给出的示例中， .table 类被设置为 display: table 并具有适当的高度。 .table-cell 类被设置为 display: table-cell 和 vertical-align: middle ，从而使其内部文本在垂直方向上居中对齐。