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

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

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

这很好：

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

没有和带有图像标记＜mat icon＞（这是一种字体）。

非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

输出：

谢谢你提出这个问题。很高兴分享。

如果需要与min-height属性一起使用，则必须将此CSS添加到：

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

这是在CSS中使用calc（）的div模式中div的另一种变体。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

这是有效的，因为：

position:absolute用于在div中精确放置div我们知道内部div的高度，因为我们将其设置为20px。计算（50%-10px），用于对中内隔板高度的50%-一半

使用显示器很容易：flex。使用以下方法，div中的文本将垂直居中：

第二部分{显示：-webkit flex；显示：柔性；对齐项目：居中；/*更多样式：*/高度：300px；背景色：#888；}＜div＞此处是您的文本。</div>

如果你愿意，水平：

第二部分{显示：-webkit flex；显示：柔性；对齐项目：居中；对齐内容：中心；/*更多样式：*/高度：300px；背景色：#888；}＜div＞此处是您的文本。</div>

您必须查看所需的浏览器版本；在旧版本中，代码不起作用。