使用转换的三行代码实际上在现代浏览器和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（令人惊讶）渲染了这些框，而不需要填充

可以通过两种方式实现

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

OR

使用flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

对齐项目：居中；使内容垂直居中

对齐内容：中心；使内容水平居中

CSS网格

正文，html｛margin:0；｝正文{显示：栅格；最小高度：100vh；对齐项目：居中；}<div>div垂直对齐</div>

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

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

特别是对于具有相对（未知）高度的父div，未知解决方案中的居中对我来说非常有用。

它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。

/*此父项可以是任何宽度和高度*/.块{文本对齐：居中；}/*鬼魂被推着保持完美的居中*/.block：之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；右边距：-0.25em；/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示：内联块；垂直对齐：中间；宽度：300px；}<div style=“width:400px；height:200px；”><div class=“block”style=“高度：90%；宽度：100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>

现在，Flexbox解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：

.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>