嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的＜div＞，高度：100%（实际上，顶部：0；底部：0，固定宽度），显示：表格单元格无法垂直居中文本。我的解决方案确实需要内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字在其中垂直居中。我这样做是通过将绝对位置放在顶部：50%，并设置行高度：0

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行动中看到：http://jsfiddle.net/jcward/7gMLx/

一个不知道价值的简单解决方案：

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

这里有一个最适合单行文本的解决方案。

如果知道行数，它还可以对多行文本进行一些调整。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

这是一个JSFiddle。

CSS:

.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的对象的元素中

这些天（我们不再需要InternetExplorer6-8），我只会使用CSS display:table（或display:flex）来解决这个问题。

表：.vcenter（.v中心）{显示：表格；背景：#eee；/*可选的*/宽度：150px；高度：150px；文本对齐：居中；/*可选的*/}.vcenter>：第一个子级{显示：表格单元格；垂直对齐：中间；}<div class=“vcenter”><p>这是我的文本</p></div>

弯曲：.vcenter（.v中心）{显示：柔性；对齐项目：居中；高度：150px；对齐内容：中心；/*可选的*/背景：#eee；/*可选的*/宽度：150px；}<div class=“vcenter”><p>这是我的文字</p></div>

对于较旧的浏览器：

这是（实际上是）我最喜欢的解决方案（简单且非常受浏览器支持）：

第二部分{边距：5px；文本对齐：居中；显示：内联块；}.vcenter（.v中心）{背景：#eee；/*可选的*/宽度：150px；高度：150px；}.vcenter:之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；最大宽度：0.001%；/*为了防止文本换行，你不应该注意到它*/}.vcenter>：第一个子级{显示：内联块；垂直对齐：中间；最大宽度：99.999%；}<div class=“vcenter”><p>这是我的文字</p></div><div class=“vcenter”><h4>这是我的文本<br/>文本</br/>文本</h4></div><div class=“vcenter”>＜div＞<p>这是我的</p><p>文本</p></div></div>

在网格项上自动边距。

与Flexbox类似，在网格项上应用自动边距会使其在两个轴上居中：

.container {
  display: grid;
}
.element {
  margin: auto;
}