您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.中心{高度：309px；线条高度：309px；/*与高度相同*/}<div class=“center”>一行。</div>

实际上，您可能可以完全删除高度属性。

这只适用于一行文本，所以要小心。

根据Adam Tomat的回答，我们准备了一个JSFiddle示例来对齐div中的文本：

<div class="cells-block">    
    text<br/>in the block   
</div>

通过在CSS中使用display:flex：

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

另一个例子和一篇博客文章中的一些解释。

使用flex时，请注意浏览器渲染的差异。

这对Chrome和Internet Explorer都很有效：

.外部{显示：柔性；宽度：200px；高度：200px；背景色：#ffc；}.内部{显示：柔性；宽度：50%；高度：50%；边距：自动；文本对齐：居中；对齐内容：中心；对齐项目：居中；背景色：#fcc；}活动任务</div></div>

与仅适用于Chrome的这款相比：

.外部{显示：柔性；宽度：200px；高度：200px；背景色：#ffc；}.内部{显示：柔性；宽度：50%；高度：50%；边距：自动；背景色：#fcc；}<div class=“outer”>活动任务</span></div></div>

我使用以下方法轻松地将随机元素垂直居中：

HTML格式：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这将使我的div中的文本位于200px高的外部div的垂直中间。请注意，您可能需要使用浏览器前缀（如我的例子中的-webkit）来使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.中心{高度：309px；线条高度：309px；/*与高度相同*/}<div class=“center”>一行。</div>

实际上，您可能可以完全删除高度属性。

这只适用于一行文本，所以要小心。

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }