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

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

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

您可以使用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>

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

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）来使其适用于您的浏览器。

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

尝试嵌入表元素。

＜div＞<table style='width:200px；高度：100px；'><td style='vertical-align:middle；'>哥本哈根</td></table></div>

在网格项上自动边距。

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

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