如何实现单行与多行文字的居中

在项目中遇到一个问题，在一个宽度为百分比形式设定宽度的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{

        500px;

        height: 500px;

        background: #333;

    }

    .message-item{

        background: #666;

        padding: 20px;

        100%;

        height: 100px;

        display: table;

        box-sizing: border-box;

    }

    .item-title{

        60%;

        margin: 0;

        display: table-cell;

        vertical-align: middle;

    }

    .item-time{

        40%;

        margin: 0;

        display: table-cell;

        vertical-align: middle;

        text-align: right;

    }

</style>