文字圖片垂直居中

每次做項目都會遇到，因此記下來，日後也可以回顧。關於文字圖片的垂直居中（當然外層容器是定高），網上有很多關於此的解決辦法，但是經過自己各種方法的嘗試，結合兼容性，實用性等等，用下列方法較多：

1、文字垂直居中

    a、單行文字垂直居中，我們都知道，把高度和行高設置成一樣就可以。

    b、多行文字垂直居中

        方法：用table-cell表格的屬性來（這相當於我們見到的td標籤，兼容IE8+）

        html:

<div class="demo tablediv">
    <div class="table-inner">
        <span>這裏有很多文字這裏有很多文字這裏有很多文字這裏有很多文字</span>
    </div>
</div>

         css:

.tablediv {
    display: table;
}
.tablediv .table-inner {
    display: table-cell;
    vertical-align: middle;
}

       .demo統一樣式

.demo {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 10px;
    background: #ccc;
}

        效果圖：

2、圖片垂直居中

    圖片的垂直居中，除了和上面文字採用圖樣的方式之外，還有一種常用的方式：

        空標籤display: inline-block; 通過vertical-align: middle來進行垂直居中

    html:

<div class="demo apha-img">
    <img src="../images/img1.jpg" alt="">
    <span class="apha"></span>
</div>

    css:

.apha-img .apha {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.apha-img img {
    vertical-align: middle;
}

    效果圖：

這裏自己使用的是空標籤span，參考的資源上面是img標籤。

    也有用爲img標籤設置背景圖，居中即可，img的圖片用gif透明圖，寬高和外層容器一樣即可。至於爲什麼用img標籤，個人理解是語義化，不然爲何不用div之類的都不用src透明圖了。

    現在技術的飛速發展，如果項目不要求兼容低版本瀏覽器，那麼flex這些就更加方便了。

參考：

張鑫旭： http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html