CSS中，居中问题

    在CSS学习中，float的使用很常见，在一个div中，如果设置float后，在该div中再创建一个img元素，这里我们称：前面的父级块元素为盒子，子级块元素为图片，如果给两个元素设置适合的宽高且图片的宽高小于盒子，这里在图片中使用：

margin:20px auto;并不能实现水平居中的效果，它只会给图片加一个上下外边距20px一个效果，同时盒子B向左贴紧盒子A：效果如图所示：

这里蓝色边框为图片的大小，黑色边框为盒子元素，要是蓝色边框居中，则需要在盒子设置position并设置为relative，同时给图片设置position:absolute，图片相对于盒子进行绝对定位，同时设置盒子的top、right、bottom、left值均为零，添加margin:auto；最终实现剧中效果。

代码如下：

       一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。
       Relative，CSS中的写法是：position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。