CSS-文本垂直居中

文本水平居中能够将text-align设置为center便可，垂直居中的话若是是单纯的设置vertical-align是没办法单独设置成功的，垂直居中的文字分为单行文本和多行文本，主要是两种不一样的实现方式。

单行文本垂直居中

设置line-height和height高度同样便可:

    .outer-line {
        border: 1px solid red;
        height: 200px;
        line-height: 200px;
        width: 200px;
    }
    <div class="outer-line">
        博客园-FlyElephant
    </div>

多行文本垂直居中

经过table和table-cell的方式实现垂直居中：

    <div class="outer-table">
        <div class="inner">
            博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/
        </div>
    </div>

样式设置:

    .outer-table {
        border: 1px solid red;
        height: 200px;
        width: 200px;
        margin-top: 20px;
        display: table;
    }
    
    .inner {
        display: table-cell;
        vertical-align: middle;
    }