CSS动态控制DIV居中

1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中

2.之前一直以为这个事情是JavaScript做的,

   步骤:通过先获取页面的Height和Width,

           然后定义DIV的Height和Width,

          最后通过上面的值运算 DIV的top值 = (页面的Heght-Div的Height)/2

                                       DIV的left值 = (页面的Width-Div的Width)/2

           而且要想实现动态居中,还得在body中加上 onresize事件·····

           总之很麻烦,很恶心,不过有一个优点,就是兼容绝大部分的浏览器

3. 后来查询资料发现,同样的动作居然用CSS也可以完成,而且更加简单,

    对,没错,相当的简单易懂:

    假设DIV控件的id是 popDiv:

    #popDiv {

     /*就是这个position:fixed起作用,生成相对定位的元素,相对于其正常位置进行定位。*/
     position:fixed;

     /*这里都是对外边距进行设置*/
     margin:auto;
     left:0;
     right:0;
     top:0;
     bottom:0;

     /*设置div的宽和高*/
     width:400px;
     height:280px;

     /*设置超出范围后,就隐藏超出的部分*/
     overflow: hidden;

     /*设置边框*/
     border: 2px solid #AEBBCA;

     /*设置背景颜色*/
     background-color: #EEF1F8;

     /*设置鼠标的样式*/
     cursor: move;
     }

     

     可以点击这里恶补以下position的知识:http://www.w3school.com.cn/cssref/pr_class_position.asp


     优点:没错,就这样就可以实现我们的要求了,不仅居中,而且是动态居中

               (不管是否有滚动条,或者拉动滚动条,或改变浏览器大小,这个div都始终居中显示在浏览器中)

     缺点:不支持恐龙级别的古老神器IE6.0以下的浏览器

原文地址:https://www.cnblogs.com/tommy-huang/p/4287462.html