最好的做法是：

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

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

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

此方法不使用任何变换。因此，输出变得模糊没有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

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

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

使用转换的三行代码实际上在现代浏览器和Internet Explorer上运行：

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

我添加这个答案是因为我发现这个答案的前一个版本有些不完整（堆栈溢出不允许我简单地评论）。

如果当前div位于主体中且没有容器div，则“position”relative会破坏样式。然而，“fixed”似乎有效，但它显然会修复视口中心的内容此外，我使用这种样式对一些覆盖div进行了居中设置，并发现在Mozilla中，这个转换后的div中的所有元素都失去了底部边框。可能是渲染问题。但是，只在其中一些页面上添加最小的填充就可以正确地渲染。Chrome和Internet Explorer（令人惊讶）渲染了这些框，而不需要填充

.center{
    display: grid;
    place-items: center;
}