使用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>

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

源代码

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

输出：

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

HTML格式：

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS：

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

在现代浏览器中，正确的方法是使用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>

检查此简单解决方案：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle公司

您可以使用显示网格并将项目放置在中心：

.容器{宽度：200px；高度：200px；边框：纯红色；显示：栅格；放置项目：中心；}<div class=“container”>Lorem，ipsum dolor。</div>