图片和文字上下左右居中

父级：relative

子级：absolute绝对定位，并设置left、top，设置margin来减去居中元素的1/2宽和1/2高。

效果图：

源码如下，粘贴到本地即可运行看到效果：左侧的图片和暂无数据文字居中。

 1 
 2 
 3 
 4     
 5     /*
 6 1.How To Use?
 7     使用absolute通常是：父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位
 8 2.What's the different?
 9     absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框.
10     relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
11  */"/>
12 
13 
52 
53 
54     

55         

56             

57                 
58                 
暂无数据
59             
60         
61         

62             
the right border
63         
64     
65 
66 
67 

View Code