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. 在ASP.NET根据DataTable中的内容导出Excel

    前台代码: <asp:Button ID="btnExcel" runat="server" Text="Excel导出" CssCl ...

  2. LightOJ 1197 LightOJ 1197(大区间素数筛选)

    http://lightoj.com/volume_showproblem.php?problem=1197 题目大意: 就是给你一个区间[a,b]让你求这个区间素数的个数 但a.b的值太大没法直接进 ...

  3. ClamAV学习【5】—— cli_scanpe函数浏览

    这近2000行的代码,要是没有Source Insight,都不知道怎么看下去.跟着跟着来到了PE文件查杀的地方,发现前面都中规中矩地进行PE属性检查,中间一段开始扫描每个区块,然后和特征库的size ...

  4. 初识Mybatis框架

    mybatis框架  主要是对数据库进行操作的 编写sql语句 使我们对数据库的crud操作更加简洁方便!! 1.使用mybatis框架 进行第一个项目 查询数据库 并返回数据 :(简单) (1)搭建 ...

  5. Windows Python Extension Packages

    备注: 1.先要安装wheel库:pip install wheel 2.下载wheel,切换至下载路径,然后安装:pip install wheel库名.whl Windows Python Ext ...

  6. SpringMvc拦截器运行原理。

    首先,先简单的说一下怎么配置SpringMvc的拦截器. 分两步,第一步先定义一个类,实现HandlerInterceptor接口. import javax.servlet.http.HttpSer ...

  7. java springboot+maven发送邮件

    springboot+maven发送邮件 废话不多说直接上代码 1. pom 文件导入jar包 <!--邮件发送--> <dependency> <groupId> ...

  8. JavaBean简介及使用

    JavaBean简介及使用  望星空 https://blog.csdn.net/joywy/article/details/7773503   一.JavaBean简介 JavaBean是使用Jav ...

  9. 晦涩难懂的shell命令

    初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...

  10. python全栈开发学习_内容目录及链接

    python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...