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

效果圖