在现代浏览器中，正确的方法是使用Flexbox。

有关详细信息，请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。

CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；溢出：隐藏；”><div style=“display：表格单元格；垂直对齐：中间；”>＜div＞在现代IE8+和其他版本中，一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器（Internet Explorer 6/7）的黑客行为合并到样式中，以隐藏新浏览器的样式：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；#position:relative；overflow:hidden；”><div样式=“#位置：绝对；#顶部：50%；显示：表格单元格；垂直对齐：中间；”><div style=“#position:relative；#top:-50%”>一切都是垂直居中的</div></div></div>

您可以通过将显示设置为“表格单元格”并应用垂直对齐：middle；：

    {
        display: table-cell;
        vertical-align: middle;
    }

然而，根据我从中复制的摘录，这并非所有版本的Internet Explorer都支持http://www.w3schools.com/cssref/pr_class_display.asp未经许可。

注意：Internet Explorer 7和更早版本不支持值“内联表”、“表”、表标题、表单元格、表列、表列组、表行、表行组和继承”。Internet Explorer 8需要！DOCTYPE。Internet Explorer 9支持这些值。

下表显示了允许的显示值http://www.w3schools.com/cssref/pr_class_display.asp.

Flexbox非常适合我，将父div中的多个元素水平和垂直居中。

下面的代码将父div内的所有元素堆叠在一列中，并将元素水平和垂直居中。我使用子div将两个Anchor元素保持在同一行（行）上。在没有子div的情况下，所有三个元素（Anchor、Anchor和Paragraph）都堆叠在父div的列中。这里只有子div堆叠在父div列中。

.父div{高度：150px；显示：柔性；弯曲方向：柱；对齐内容：中心；背景：粉色；}<div class=“parent div”><div class=“child div”><a class=“footer link”href=“https://www.github.com/“>GitHub</a><a class=“footer link”href=“https://www.facebook.com/“>脸书</a><p class=“footer copywrite”>©2019 Lorem Ipsum</p＞</div></div>

您可以使用Flexbox在div内垂直对齐中心文本。

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

您可以在Flexbox完整指南中了解更多信息。

使用CSS网格为我做到了：

.外部{背景色：灰色；宽度：10rem；高度：10rem；显示：栅格；对齐项目：中心；}.内部{背景色：#FF8585；对齐自身：中心；}<div class='outer'><div class='inner'>所容纳之物</div></div>

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

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

.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。