定位始终居中显示

一：预热回顾

      1.CSS中每个元素都有定位特性，默认为static！   

      2.参照物     坐标系    坐标系单位（百分比、px）

         absolute：若祖先标签不具备参照物特质（position：relative、absolute），则以浏览器窗口边框 html进行定位。

                        脱离文档流

         relative： 以原始位置为参照物进行偏移。 

                        没有脱离文档流,  之前的位置依然占用哦！ 设置高度后会撑开父元素的高度哦。 

                        相对定位覆盖文档流。   相对定位元素之间也存在覆盖现象哦！ 

                        相对单位top属性用百分比无效？ 那就用px！    left、right属性就没这个问题哦！         why?   

                         答：因为百分比是相对单位，是参照父元素的值决定的，因为在浏览器中，body的默认高度，并不是浏览器的可视区域高度。但是body的默认                                          宽度是浏览器的可视区域宽度。所以，body的高度是0px，20%也是0了。 

                               所以用相对单位的时候一定要看父元素有无高度哦！不是默认高度哦 ！     相对单位都是从父元素那里继承的高度哦！

      3.top、left等值是可以取负值的哦！  

方案一：定位实现     二次定位哦（曲线救国）!       

#wrap{
    position: absolute;   /* 绝对定位元素作为定位参照物哦 */
    left:50%;
    top:50%;
    200px;
    height:100px;
    border:1px dashed blue;
}
 #box{
     position:absolute;
     left:-50%;
     top:-50%;
     200px;
     height:100px;
     background:red;
 }

<div id="wrap">
    <div id="box"></div>
</div>

方案二： js实现

             思路：可以这么做，在加载页面的时候执行个js方法；把div的左间距设置为浏览器当前的宽度减去div宽度的一半，

                        上下的话：  就把上间距设置为浏览器当前的高度减去div高的一半；

     

其他： http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/