我只想扩展Michielvoo的答案，以释放对线高度和呼吸div高度的需求。它基本上只是这样一个简化版本：

第二部分{宽度：250px；/*高度：100px；线条高度：100px*/文本对齐：居中；边框：1px实心#12346；背景色：#bbbbff；填充：10px；边距：10px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>所有的成年人都曾经是孩子。。。但只有少数人记得</span></div>＜div＞<span>现在这是我的秘密，一个非常简单的秘密：只有用心才能看清真相；本质的东西是肉眼看不见的</span></div>

注：注释了封闭分区固定高度所需的cssis部分。

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

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

将此小代码添加到元素的CSS属性中。太棒了。试试看！

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

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

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

为此，我们写下：

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

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

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

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

灵活的方法

第二部分{宽度：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＞