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以下的浏览器

CSS动态控制DIV居中的更多相关文章

  1. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  3. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  4. 如何通过CSS让DIV居中对齐

    给Div对应的CSS的添加如下设定即可: MARGIN-RIGHT: auto; MARGIN-LEFT: auto;

  5. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  6. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  7. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  8. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  9. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

随机推荐

  1. 将图片流输出到界面mvc

    System.Drawing.Image _CodeImage = _Code39.GetCodeImage(OrderNo, Code39.Code39Model.Code39Normal, tru ...

  2. 10-11Linux用户管理规则及用户管理函数

    用户管理: useradd, userdel, usermod, passwd, chsh, chfn, finger, id, chage 组管理: groupadd, groupdel, grou ...

  3. C# winform截图、web Cropper图片剪切、上传

    今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能. 废话不多说,直接上图: 1.winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在 ...

  4. ceph: health_warn clock skew detected on mon的解决办法

    造成集群状态health_warn:clock skew detected on mon节点的原因有两个,一个是mon节点上ntp服务器未启动,另一个是ceph设置的mon的时间偏差阈值比较小. 排查 ...

  5. “全栈2019”Java异常第八章:throw关键字详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  6. php 递归数据,三维数组转换二维

    public function sortarea($area, $parent_id = 0, $lev = 1){ static $list; foreach($area as $v){ if($v ...

  7. Object中的方法以及对象相等的判定

    看图说话 Object有以下几个方法 getClass() final类型,主要是用来获得运行时的类型 hashCode() 返回该对象的哈希码值,方法是为了提高哈希表(例如 java.util.Ha ...

  8. C# 并发队列ConcurrentQueue

    测试函数 static async Task RunProgram() { var taskQueue = new ConcurrentQueue<CustomTask>(); var c ...

  9. LARTC

    大牛的博客 howto ,however, is simplify. another space ip link list ip address show ip route show route -n ...

  10. Ubuntu+Mac使用飞鸽传书iptux进行互通

    iptux不能直接与Mac版的IPMessage进行文件传输,但是可以和Windows的IPMessage进行互通.如果要实现Ubuntu和Mac下互通,就必须编译同一套代码,因为使用C++写的,所以 ...