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

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

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

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

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

我只是找到了另一种对我有用的方法：

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

更多信息

实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度。

#集装箱{位置：绝对；顶部：50%；页边空白：-200像素；/*#内容高度的一半*/左：0；宽度：100%；}#内容{宽度：624px；左边距：自动；右边距：自动；高度：395px；边框：1px实心#000000；}<div id=“container”><div id=“content”><h1>居中的div</h1></div></div>

这是结果。

要使div在页面上居中，请选中fiddle链接。

#甚高频{边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

另一种选择是使用flex框，选中fiddle链接。

.vh文件{背景色：#ddd；高度：400px；对齐项目：居中；显示：柔性；}.vh>div{宽度：100%；文本对齐：居中；垂直对齐：中间；}<div class=“vh”><div>div垂直对齐</div></div>

另一种选择是使用CSS 3转换：

#甚高频{位置：绝对；顶部：50%；左：50%；/*变换：translateX（-50%）translateY（-50%）*/转换：转换（-50%，-50%）；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

CSS网格

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