CSS垂直居中的几种方法

单行内容居中

单行文字居中，只需要设置文字的line-height属性和父容器等高即可。

    <div class="box">
        <p>我是一行测试文字</p>
    </div>

    div.box{width: 200px;height: 100px;background-color: #999;margin: 20px;}
    .box p{line-height: 100px;}

大小不固定的多行文字display：table-cell 垂直居中

大小不固定的多行文字垂直居中，将其父容器设置为表格模型，然后使用表格中vertical-align: middle属性让子容器居中。父容器display：table，子元素display：table-cell ; vertical-align: middle

    <div class="box box-table">
        <span>我是一行测试文字我是一行测试文字我是一行测试文字我是一行测试文字</span>
    </div>

         div.box{width: 200px;height: 100px;background-color: #999;margin: 20px;}
        .box-table{display: table;}
        .box-table span{display: table-cell;vertical-align: middle;}