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;
    }