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

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

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

另一种方式（此处尚未提及）是使用Flexbox。

只需向容器元素添加以下代码：

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox演示1

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；对齐内容：中心；/*水平对齐*/对齐项目：居中；/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet，consectetuer adipiscing elit，sed diam nonmmy笔尖</div>

或者，当柔性容器中只有一个柔性项时，flexbox也可以使用自动边距将柔性项居中，而不是通过容器对齐内容（如上面问题中给出的示例）。

因此，要在水平和垂直方向上将柔性项居中，只需将其设置为margin:auto

Flexbox演示2

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；}.箱形跨度{边距：自动；}<div class=“box”><span>边距：在弹性项上自动将其水平和垂直居中</span></div>

注意：以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为，因为默认情况下，弯曲方向的值为row。然而，如果柔性项需要在垂直列中布局，则应在容器上设置柔性方向：列，以将主轴设置为列，此外，justify-content和align-items财产现在与justify content相反：垂直居中和align-items：水平居中）

灵活方向：列演示

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：18px；字体样式：倾斜；颜色：#FFF；显示：柔性；弯曲方向：柱；对齐内容：中心；/*垂直对齐项目*/对齐项目：居中；/*水平对齐项目*/}p型{边距：5px；}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容：居中”-垂直对齐</p><p>“对齐项目：居中”-水平对齐</p></div>

flexyboxes是一个很好的地方，可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持

此外，现在的浏览器支持非常好：caniuse

为了实现显示的跨浏览器兼容性：调整和对齐项目，可以使用以下选项：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

供参考并添加更简单的答案：

纯CSS：

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

或作为SASS/SCSS混合物：

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用人：

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström的博客文章垂直对齐任何东西，只需3行CSS：

由于元素放置在“半像素”上，此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示：

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

我们生活在2015年+，每个主要的现代浏览器都支持Flex Box。

这将是网站从现在开始制作的方式。

学习它！

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

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

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

为此，我们写下：

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

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

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

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

例子：

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