我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
请尝试以下代码：
display: table-cell;
vertical-align: middle;
第二部分{高度：80%；宽度：100%；文本对齐：居中；显示：表格单元格；垂直对齐：中间；背景：#4CAF50；颜色：#fff；字体大小：50px；字体样式：斜体；}＜div＞Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来，Lorem Ipsum一直是业界的标准虚拟文本</div>
其他回答
所有功劳都归于该链接所有者@Sebastian Ekström link；请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章，我还创建了一个演示小提琴。
只需要三行CSS（不包括供应商前缀），我们就可以借助转换来实现：translateY垂直居中，即使我们不知道它的高度。
CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常，这必须通过绝对定位或设置行高度来完成，但这些要求您知道元素的高度，或者仅适用于单行文本等。
为此，我们写下：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在元素上设置任何高度，也不必在父元素上设置位置属性。它可以直接开箱即用，即使在Internet Explorer 9中也是如此！
为了使其更加简单，我们可以将其编写为带有供应商前缀的混合体。
供参考并添加更简单的答案：
纯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。
这将是网站从现在开始制作的方式。
学习它！
.box｛宽度：100%；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}.高度{线条高度：170px；高度：170px；}.转换｛高度：170px；位置：相对；}.转换p{边距：0；位置：绝对；顶部：50%；左：50%；-ms变换：平移（-50%，-50%）；转换：转换（-50%，-50%）；}<h4>使用高度</h4><div class=“box height”>Lorem ipsum悲哀坐</div><hr/><h4>使用变换</h4><div class=“box transform”><p>Lorem ipsum悲哀坐</p></div>
您可以使用以下代码段作为参考。这对我来说就像一种魅力：
html，正文{高度：100%；边距：0；填充：0；宽度：100%；}正文{显示：表格；}.居中文本{文本对齐：居中；显示：表格单元格；垂直对齐：中间；}<div class=“居中文本”><h1>是的，这是我的登录页</h1><h2>正在建设中，即将到来</氢气></div>
上述代码段的输出如下：
尝试转换属性：
#盒子{高度：90px；宽度：270px；位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>
