Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。

.外部{位置：绝对；显示：表格；宽度：100%；高度：100%；文本对齐：居中；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{文本对齐：居中；显示：内联块；宽度：自动；}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></div>

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

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

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

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

使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS，其中的内容需要居中：

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

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

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

对于那些不想跳的人：

将父容器指定为位置：相对或位置：绝对。指定子容器上的固定高度。在子容器上设置位置：绝对和顶部：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>