css不定高圖文垂直居中的三種方法

html部分

<div class="box">
        <img class="img" src="http://p2.so.qhmsg.com/bdr/_240_/t0196d3945287174d27.jpg" alt="">
        <span class="text">111111111</span>
</div>

css部分

        /*方法1：table-cell*/
        .box{
            display: table-cell;
        }
        .img{
            vertical-align: middle;
        }
        .text{
            vertical-align: middle;
        }

        /*方法2：display:flex*/
        .box{
            display: flex;
            /*水平居中*/
            justify-content:center;
            /*垂直居中*/
            align-items:Center;
        }

        /*方法3：display:flex和margin:auto*/
        .box{
            display: flex;
        }
        .box img{margin: auto 0;}
        .box .text{margin: auto 0;}

效果圖