不使用行高垂直对齐内部div文本

Question

我有以下代码：

<div style="height: 100px;">Text Go Here</div>

我想在这个 div 中实现文字的垂直居中，但是我不想使用如下所示的 line-height 方法：

<div style="height: 100px; line-height:100px;">I don't want to use line-heigh</div>

因为行高应该是：line-height:20px;

我该如何做到这一点？！

谢谢 :)

- Saeed sdns

Answer 1

最简单的处理方法是将div看作表格单元格：

<div style="display: table-cell; height: 100px; vertical-align: middle;">Text Go Here</div>

- Sam

---

我测试了table-cell，但在这个位置它不能正常工作。 - Saeed sdns

Answer 2

div {
    display: table;
    height: 100px;
    width: 100px;
    border: 1px solid #ddd
}
span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div>
    <span>Text Go Here</span>
</div>

- Gowrav