图片在容器里水平垂直居中

一、水平居中

.wrap{
        height: 200px;
        width:200px;
        text-align: center;
        }

.warp img{
        display: inline-block;          
        }

.wrap{
        height: 200px;
        width:200px
        }

.warp img{
        display: inline-block;  
                margin:0 auto;      
        }

二、垂直居中

        .warp{
            height: 200px;
            width: 200px;           
            line-height: 200px;//必须line-height=height
        }

        ul.news li img{
            vertical-align: middle;
            display: inline-block;;         
        }

为什么wrap在display=table-cell时，.wrap设置vertical-align: middle;无效？？