实现多行为本垂直居中

方法总结：

高度固定，内部文字不定，实现文字垂直居中

1 使用table

html

<div class="text">
    <table>
        <tr>
            <td>
                多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
                多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
                多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
                多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
            </td>
        </tr>
    </table>
</div>

css

.text {
            border: 1px solid red;
            padding: 10px;
            width: 600px;
        }
        .text table{
            height: 500px;
        }

2 使用display：table

html

<div class="text">
    <div>
        <span>
            多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
            多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
            多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
            多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
        </span>
    </div>
</div>

css

.text {
            display: table;
            width:600px;
            height:300px;
            border: 1px solid red;

        }
        .text div{
            display: table-cell;
            vertical-align: middle;
        }

3 利用line-height实现多行文本垂直居中

html

<div class="text">
    <span>
        多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
        多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
        多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
        多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
    </span>
</div>

css

.text {
            width:600px;
            line-height:300px;
            border: 1px solid red;
        }
        .text span{
            display: inline-block;
            line-height: normal;
            vertical-align: middle;
        }

高度不固定实现多行文本垂直居中

html

<div class="text">
    多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
    多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
    多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
    多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；多行文本垂直居中；
</div>

css

.text {
            padding:20px;
            width:600px;
            border: 1px solid red;
        }