嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的＜div＞，高度：100%（实际上，顶部：0；底部：0，固定宽度），显示：表格单元格无法垂直居中文本。我的解决方案确实需要内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字在其中垂直居中。我这样做是通过将绝对位置放在顶部：50%，并设置行高度：0

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行动中看到：http://jsfiddle.net/jcward/7gMLx/

嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的＜div＞，高度：100%（实际上，顶部：0；底部：0，固定宽度），显示：表格单元格无法垂直居中文本。我的解决方案确实需要内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字在其中垂直居中。我这样做是通过将绝对位置放在顶部：50%，并设置行高度：0

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行动中看到：http://jsfiddle.net/jcward/7gMLx/

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

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

如果你愿意，水平：

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

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

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

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

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

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