实现img图片在指定容器中水平垂直居中

父元素display:table-cell & vertical-align:middle

div{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100px;
    height:100px;
}
img{
    width:80px;
    height:80px;
}

子元素position:absolute & 盒子模型margin

div{
       position: relative;
       width: 100px;
       height: 100px;
    }
img{
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       margin: auto;
       width: 80px;
       height: 80px;
    }

CSS3 transform属性

div{
       position: relative;
       width: 100px;
       height: 100px;
    }
img{
       position: relative;
       /*  相对于父元素向右下移动50%，即50px  */
       left:50%;
       top:50%; 
       /*  相对于自身像左上移动50%，即40px  */  
       transform:translate(-50%,-50%);
       height: 80px;
       width: 80px;
    }