作为答案被接受的解决方案是完美的，使用与div高度相同的行高度，但当文本被换行或是两行时，此解决方案无法完美工作。

如果文本被换行或在div中的多行上，请尝试此操作。

#box
{
  display: table-cell;
  vertical-align: middle;
}

有关更多参考信息，请参阅：

垂直居中多行文本CSS垂直居中的6种方法

无论您想要垂直居中样式，都可以尝试显示：表格单元格和垂直对齐：中间。

例子：

#盒子{显示：表格单元格；垂直对齐：中间；高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>

我需要一排可点击的大象，垂直居中，但不用桌子来绕过一些InternetExplorer9的奇怪之处。

我最终找到了最好的CSS（满足我的需要），它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是，Internet Explorer 9仍然在嘲笑我。。。

第二部分{边框：1px蓝色虚线；显示：内联；线条高度：100px；高度：100px；}跨度{边框：1px纯红色；显示：内联块；线高度：正常；垂直对齐：中间；}.输出{边框：3px纯银；显示：内联块；}<div class=“out”onclick=“alert（1）”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div>＜div＞＜span＞一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert（2）”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div>＜div＞＜span＞点击一些迷人的东西。</span＞</div></div>

显然，你不需要边界，但它们可以帮助你了解它是如何工作的。

一个非常简单和最强大的垂直对齐中心的解决方案：

.外部div{高度：200px；宽度：200px；文本对齐：居中；边框：1px实心#000；}.内部{位置：相对；顶部：50%；变换：translateY（-50%）；颜色：红色；}<div class=“outer div”><span class=“inner”>无可用数据</span></div>

对于单行文本（或单个字符），可以使用以下技术：

当#box具有非固定的相对高度（以%为单位）时，可以使用它。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

在JsBin（更容易编辑CSS）或JsFiddle（更容易更改结果框的高度）观看现场演示。

如果你想将内部文本放在HTML中，而不是CSS中，那么你需要将文本内容包装在额外的内联元素中，然后编辑#box:：after以匹配它。（当然，content:property应该被删除。）

例如<div id=“box”><span>文本内容</span></div>。在这种情况下，#box：：after应替换为#box span。

对于Internet Explorer 8支持，必须将：：替换为：。

您可以在CSS中使用定位方法：

检查此处的结果。。。。

HTML格式：

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}