11.table妙用--文字居中

display：table和table-cell是如何让多行文字垂直居中的

    .parent{

        display:table;

        margin:0 auto;

        text-align:center;

        width:200px;

        height:300px;

        border:1px solid red;

    }

    .son{

        display:table-cell;

        height:210px;

        vertical-align:middle;

    }

    .son i{

        font-style:normal;

        background:red;

    }

  </style>

 

    <div class="parent">

        <p class="son">

            <i>Lorem</i> 

            ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur veritatis necessitatibus accusamus, consequatur deserunt numquam placeat ipsam ipsa rem perferendis enim vitae ut molestias sapiente accusantium modi praesentium nam aliquam.

        </p>

    </div>