在项目中遇到一个问题，在一个宽度为百分比形式设定宽度的div中，文字可能不多但是也可能较多，会超过一行。怎么才能做到不管1行还是2行3行，文字都可以上下左右居中呈现。
解决方法：
1使用flex
只需要这样设置css属性即可
div{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2使用table-cell
父元素display设置为table，子元素display设置为table-cell并且vertical-align设置为middle
代码如下：
<div class="message-box">
<div class="message-item">
<p class="item-title">课程下单成功</p>
<p class="item-time">2017-02-01 10:30</p>
</div>
<div class="message-item">
<p class="item-title">您报名的活动即将开始【作品集日-一起来看展】</p>
<p class="item-time">2017-02-01 10:30</p>
</div>
</div>
<style>
.message-box{
width: 500px;
height: 500px;
background: #333;
}
.message-item{
background: #666;
padding: 20px;
width: 100%;
height: 100px;
display: table;
box-sizing: border-box;
}
.item-title{
width: 60%;
margin: 0;
display: table-cell;
vertical-align: middle;
}
.item-time{
width: 40%;
margin: 0;
display: table-cell;
vertical-align: middle;
text-align: right;
}
</style>