最好的做法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150像素，因为在本例中，这是div高度的一半。

最简单的解决方案如下：

.外部div{宽度：100%；高度：200px；显示：柔性；边框：1px实心#000；}.内部div{边距：自动；文本对齐：居中；边框：1px纯红色；}<div class=“outer div”><div class=“inner div”>嘿！</div></div>

我最近发现了一个技巧：你需要使用前50%，然后再进行translateY（-50%）。

.外部div{位置：相对；高度：150px；宽度：150px；背景色：红色；}.居中div{位置：绝对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；背景色：白色；}<div class='outer-div'><div class='entered-div'>测试文本</div></div>

最简单的方法是以下三行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>

当我不得不回到这个问题上时，这总是我要去的地方。

对于那些不想跳的人：

将父容器指定为位置：相对或位置：绝对。指定子容器上的固定高度。在子容器上设置位置：绝对和顶部：50%，以将顶部向下移动到父容器的中间。设置页边距上限：-yy，其中yy是子容器高度的一半，以向上偏移项目。

代码中的示例：

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高，孩子来居中。

下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。

正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>