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

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

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

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

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

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>

灵活的方法

第二部分{宽度：250px；最小高度：50px；线条高度：50px；文本对齐：居中；边框：1px实心#12346；边距底部：5px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet</span></div>＜div＞

您可以在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%);
}

所有功劳都归于该链接所有者@Sebastian Ekström link；请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章，我还创建了一个演示小提琴。

只需要三行CSS（不包括供应商前缀），我们就可以借助转换来实现：translateY垂直居中，即使我们不知道它的高度。

CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常，这必须通过绝对定位或设置行高度来完成，但这些要求您知道元素的高度，或者仅适用于单行文本等。

为此，我们写下：

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在元素上设置任何高度，也不必在父元素上设置位置属性。它可以直接开箱即用，即使在Internet Explorer 9中也是如此！

为了使其更加简单，我们可以将其编写为带有供应商前缀的混合体。

请尝试以下代码：

display: table-cell;
vertical-align: middle;

第二部分{高度：80%；宽度：100%；文本对齐：居中；显示：表格单元格；垂直对齐：中间；背景：#4CAF50；颜色：#fff；字体大小：50px；字体样式：斜体；}＜div＞Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来，Lorem Ipsum一直是业界的标准虚拟文本</div>