解决“加载gif图”居中问题

CSS

.item-div{
//border: 1px solid #5E6372;
    display: table;
    height: 100%;
    width: 100%;
}
.item-div div{
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}
.item-div img{
    width: 50px;
}

HTML：

<div class="item-div">
     <div>
        <img src="__PUBLIC__/icon/loadingOfAgent.gif"/>
     </div>
</div>

这里一共用到了四个主要属性，text-align:center;      vertical-align: middle;     display: table;    display: table-cell。

1. 让父级DIV使用    display: table;是为了是使这个盒子的宽度达到 100%。width: 100%;用在使用了    display: table-cell;上是没效果的。
   

2. text-align:center;      vertical-align: middle;用在子级DIV分别用作     水平居中和    垂直居中；text-align:center;对很多元素都是有效的，但是vertical-align: middle;则是只对    td有效，所以这里讲子级DIV的属性display为table-cell