因为每次我需要垂直居中div时，我都会一遍又一遍地搜索它，这个答案总是首先出现的，所以我会把这个留给未来的我（因为提供的解决方案都不能很好地满足我的需求）：

因此，如果已经在使用引导程序，可以按如下方式进行：

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

我分享了一个简短的版本。

.first分区{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.firstDivision垂直中心{文本对齐：居中；显示：表格单元格；垂直对齐：中间；}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>

不回答浏览器兼容性，但也要提到新的网格和不那么新的Flexbox功能。

Grid

来自：Mozilla-网格文档-垂直对齐Div

浏览器支持：网格浏览器支持

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML格式：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

柔性包装箱

浏览器支持：Flexbox浏览器支持

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

最简单的方法是以下三行CSS：

1） 位置：相对；

2） 顶部：50%；

3） 变换：translateY（-50%）；

以下是一个示例：

外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>

名单上还有一个我看不到的：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

跨浏览器（包括Internet Explorer 8-Internet Explorer 10，无黑客攻击！）响应百分比和最小值/最大值-居中，不考虑填充（不考虑框大小！）必须声明高度（请参见可变高度）建议设置溢出：自动防止内容溢出（请参阅溢出）

来源：CSS中的绝对水平和垂直居中

我认为，对于所有不使用Flexbox的浏览器来说，“alignitems:center；”是一种显示：表格和垂直对齐：中间；的组合；。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

演示：https://jsfiddle.net/6m640rpp/