对于新手，请尝试：

display: flex;
align-items: center;
justify-content: center;

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

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

因为每次我需要垂直居中div时，我都会一遍又一遍地搜索它，这个答案总是首先出现的，所以我会把这个留给未来的我（因为提供的解决方案都不能很好地满足我的需求）：

因此，如果已经在使用引导程序，可以按如下方式进行：

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

最简单的解决方案如下：

.外部div{宽度：100%；高度：200px；显示：柔性；边框：1px实心#000；}.内部div{边距：自动；文本对齐：居中；边框：1px纯红色；}<div class=“outer div”><div class=“inner div”>嘿！</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;
}