在网格项上自动边距。

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

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

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;
}

您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.中心{高度：309px；线条高度：309px；/*与高度相同*/}<div class=“center”>一行。</div>

实际上，您可能可以完全删除高度属性。

这只适用于一行文本，所以要小心。

这很好：

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＞（这是一种字体）。

您可以通过将显示设置为“表格单元格”并应用垂直对齐：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.

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

display: flex;
align-items: center;