这在我的情况下有效（仅在现代浏览器中测试）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

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

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

指向CodePen的链接：

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

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

我认为，对于所有不使用Flexbox的浏览器来说，“alignitems:center；”是一种显示：表格和垂直对齐：中间；的组合；。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

演示：https://jsfiddle.net/6m640rpp/

如果有人只关心Internet Explorer 10（及更高版本），请使用Flexbox：

.父级{宽度：500px；高度：500px；背景：黄色；显示：-webkit flex；显示：-ms flexbox；显示：柔性；-webkit调整内容：中心；-ms柔性包装：中心；对齐内容：中心；-webkit对齐项目：中心；-ms flex align:中心；对齐项目：居中；}.居中{宽度：100px；高度：100px；背景：蓝色；}<div class=“parent”><div class=“center”></div></div>

Flexbox支架：http://caniuse.com/flexbox

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

<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>

这是结果。