我如何垂直居中文本与CSS？
我有一个包含文本的div元素，我想将此div的内容垂直居中对齐。
这是我的div风格：
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>你可以尝试这种基本的方法：
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello World!
</div>另一种方式（这里没有提到）与Flexbox。
只需将以下代码添加到容器元素即可：
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Flexbox演示1
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>您可以通过添加以下一段CSS代码轻松完成此操作：
display: table-cell;
vertical-align: middle;
这意味着你的CSS最终看起来像：
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}<div id="box">
Some text
</div>