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。
-
让父级DIV使用 display: table;是为了是使这个盒子的宽度达到 100%。width: 100%;用在使用了 display: table-cell;上是没效果的。
-
text-align:center; vertical-align: middle;用在子级DIV分别用作 水平居中和 垂直居中;text-align:center;对很多元素都是有效的,但是vertical-align: middle;则是只对 td有效,所以这里讲子级DIV的属性display为table-cell