父元素设置垂直居中(display:table-cell;vertical-align:middle)会出现间隙

在一些情况下，我们需要对图片设置垂直水平居中的效果

html

css

.result-list li .img{
    width: 210px;
    height: 210px;
    overflow: hidden;
    text-align: center;
    background: #455db8;
    display: table-cell;
    vertical-align: middle;
}
.result-list li .img img{
    max-width:100%;
    max-height: 100%;
}

效果是这样：

可以看到图片距离父元素底部有间隙；
如果解决这个问题呢？很简单，只要给父元素设置font-size:0就行了

.result-list li .img{
    width: 210px;
    height: 210px;
    overflow: hidden;
    text-align: center;
    background: #455db8;
    display: table-cell;
    vertical-align: middle;
    font-size:0
}