文字图片垂直居中

每次做项目都会遇到，因此记下来，日后也可以回顾。关于文字图片的垂直居中（当然外层容器是定高），网上有很多关于此的解决办法，但是经过自己各种方法的尝试，结合兼容性，实用性等等，用下列方法较多：

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