我使用以下方法轻松地将随机元素垂直居中：

HTML格式：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这将使我的div中的文本位于200px高的外部div的垂直中间。请注意，您可能需要使用浏览器前缀（如我的例子中的-webkit）来使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

在现代浏览器中，正确的方法是使用Flexbox。

有关详细信息，请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。

CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；溢出：隐藏；”><div style=“display：表格单元格；垂直对齐：中间；”>＜div＞在现代IE8+和其他版本中，一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器（Internet Explorer 6/7）的黑客行为合并到样式中，以隐藏新浏览器的样式：

div｛border:1px实心绿色；｝<div style=“display:table；height:400px；#position:relative；overflow:hidden；”><div样式=“#位置：绝对；#顶部：50%；显示：表格单元格；垂直对齐：中间；”><div style=“#position:relative；#top:-50%”>一切都是垂直居中的</div></div></div>

您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.中心{高度：309px；线条高度：309px；/*与高度相同*/}<div class=“center”>一行。</div>

实际上，您可能可以完全删除高度属性。

这只适用于一行文本，所以要小心。

这将使文本垂直居中：

.父级{显示：内联柔性}.推荐文本{边距顶部：自动；边距底部：自动；}<div class=“parent”><div class=“推荐文本”>你好，世界</div></div>

这是在CSS中使用calc（）的div模式中div的另一种变体。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

这是有效的，因为：

position:absolute用于在div中精确放置div我们知道内部div的高度，因为我们将其设置为20px。计算（50%-10px），用于对中内隔板高度的50%-一半

检查此简单解决方案：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle公司