父级div使用display:table-cell；vertical-align:middle会出现空隙。

父级div使用display:table-cell；vertical-align:middle会出现空隙。

1、html如下

 <div class="divCon">    <img  src="katong.png" /> </div> 

2、css

.divCon{width:200px;height:200px;background:black;display: table-cell;vertical-align: middle;text-align:center;}.divCon img{width: 100%;height:100%;}

3、显示效果：

4、问题：如上面红色圈出所示，父框会多出3px的高度

5、解决方法：

    a、让vertical-align在img中失效，给img设置display:block;使vertical-align:middle失效，因为它对块级元素不生效

    b、给Img设置ling-height:0px

    c、给父级div设置font-size:0

6、正常显示效果：