我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
另一种方式：
不要设置div的height属性，而是使用padding:来实现效果。与行高度类似，它仅在您有一行文本时有效。尽管这样，如果您有更多的内容，文本仍然会居中，但div本身会稍微大一些。
因此，与其继续：
div {
height: 120px;
line-height: 120px;
}
你可以说：
div {
padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}
这会将div的顶部和底部填充设置为60px，左侧和右侧填充设置为零，使div高120像素（加上字体的高度），并将文本垂直居中放置在div中。
其他回答
所有功劳都归于该链接所有者@Sebastian Ekström link；请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章，我还创建了一个演示小提琴。
只需要三行CSS（不包括供应商前缀），我们就可以借助转换来实现：translateY垂直居中，即使我们不知道它的高度。
CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常，这必须通过绝对定位或设置行高度来完成，但这些要求您知道元素的高度，或者仅适用于单行文本等。
为此，我们写下：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在元素上设置任何高度，也不必在父元素上设置位置属性。它可以直接开箱即用，即使在Internet Explorer 9中也是如此！
为了使其更加简单，我们可以将其编写为带有供应商前缀的混合体。
尝试此解决方案：
.扩展器{位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；overflow-y：隐藏；overflow-x：隐藏；}.衬垫中心{宽度：100%；高度：100%；显示：-webkit框；显示：-moz框；显示：-ms flexbox；显示：-webkit flex；显示：柔性；-webkit盒子包：中心；-moz盒装：中心；-ms柔性包装：中心；-webkit调整内容：中心；对齐内容：中心；-webkit框对齐：居中；-moz框对齐：居中；-ms flex align:中心；-webkit对齐项目：中心；对齐项目：居中；}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>
使用CSS+构建。
简单而通用的方法是表格方法）：
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性（或等效的类）甚至可以使许多子标记对齐：
<parent ctrv> <ch1/> <ch2/> </parent>
.element{position: relative;top: 50%;transform: translateY(-50%);}
将此小代码添加到元素的CSS属性中。太棒了。试试看！
.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>
