我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。
这是我的＜div＞风格：
#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么？
当前回答
满足所有垂直对齐需求！
声明此Mixin：
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
然后将其包含在元素中：
.element{
@include vertical-align();
}
其他回答
您还可以使用以下财产。
display: flex;
align-content: center;
justify-content : center;
简单而通用的方法是表格方法）：
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性（或等效的类）甚至可以使许多子标记对齐：
<parent ctrv> <ch1/> <ch2/> </parent>
.text{
background: #ccc;
position: relative;
float: left;
text-align: center;
width: 400px;
line-height: 80px;
font-size: 24px;
color: #000;
float: left;
}
我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。
例子：
div { display:flex; align-items:center; }
供参考并添加更简单的答案：
纯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。
这将是网站从现在开始制作的方式。
学习它！
