尝试一下，在父div上添加：

display: flex;
align-items: center;

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

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

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

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

源代码

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

输出：

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

Use:

h1小时{边距：0；位置：绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）；}.容器{高度：200px；宽度：500px；位置：相对；边框：1px实心#eee；}<div class=“container”><h1>垂直对齐文本</h1></div>

使用此技巧，如果您不想使其居中，可以对齐任何对象。添加“left:0”以向左对齐。

这些天（我们不再需要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>

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

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