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

对于那些不想跳的人：

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

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

这是迄今为止最简单的方法，也适用于非阻塞元素。唯一的缺点是它是Flexbox，因此，较旧的浏览器将不支持此功能。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

指向CodePen的链接：

http://codepen.io/damianocel/pen/LNOdRp

这里重要的一点是，对于垂直居中，我们需要定义父元素（容器），并且img的高度必须小于父元素。

使用CSS Flexbox align items属性来实现这一点。

html，正文{高度：100%；}正文{显示：柔性；对齐项目：居中；}<div>垂直居中</div>

最好的做法是：

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

150像素，因为在本例中，这是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>