display:table-cell实现水平垂直居中

<style>
    html,body{height: 100%;margin:0;padding:0;}
    /*** .table和.cell都将撑满页面，cell的子元素水平垂直居中 ***/
    .table{
        display: table;
        width: 100%;
        height: 100%;
    }
    .cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #666;
    }
</style>
<div class="table">
    <div class="cell">
        <p>我爱你</p>
        <p>亲爱的中国</p>
        <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
    </div>
</div>