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以下的浏览器
CSS动态控制DIV居中的更多相关文章
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css使div居中
每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;
- 如何通过CSS让DIV居中对齐
给Div对应的CSS的添加如下设定即可: MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- 【转】CSS中怎么让DIV居中
来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...
- CSS中怎么让DIV居中(转载)
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
- CSS中怎么让DIV居中
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
随机推荐
- 在ASP.NET根据DataTable中的内容导出Excel
前台代码: <asp:Button ID="btnExcel" runat="server" Text="Excel导出" CssCl ...
- LightOJ 1197 LightOJ 1197(大区间素数筛选)
http://lightoj.com/volume_showproblem.php?problem=1197 题目大意: 就是给你一个区间[a,b]让你求这个区间素数的个数 但a.b的值太大没法直接进 ...
- ClamAV学习【5】—— cli_scanpe函数浏览
这近2000行的代码,要是没有Source Insight,都不知道怎么看下去.跟着跟着来到了PE文件查杀的地方,发现前面都中规中矩地进行PE属性检查,中间一段开始扫描每个区块,然后和特征库的size ...
- 初识Mybatis框架
mybatis框架 主要是对数据库进行操作的 编写sql语句 使我们对数据库的crud操作更加简洁方便!! 1.使用mybatis框架 进行第一个项目 查询数据库 并返回数据 :(简单) (1)搭建 ...
- Windows Python Extension Packages
备注: 1.先要安装wheel库:pip install wheel 2.下载wheel,切换至下载路径,然后安装:pip install wheel库名.whl Windows Python Ext ...
- SpringMvc拦截器运行原理。
首先,先简单的说一下怎么配置SpringMvc的拦截器. 分两步,第一步先定义一个类,实现HandlerInterceptor接口. import javax.servlet.http.HttpSer ...
- java springboot+maven发送邮件
springboot+maven发送邮件 废话不多说直接上代码 1. pom 文件导入jar包 <!--邮件发送--> <dependency> <groupId> ...
- JavaBean简介及使用
JavaBean简介及使用 望星空 https://blog.csdn.net/joywy/article/details/7773503 一.JavaBean简介 JavaBean是使用Jav ...
- 晦涩难懂的shell命令
初学shell脚本,过程中发现许多不易于理解的脚本语言,网上各种查找学习之后,择优精简一番,做出以下总结,方便以后遗忘了回顾,也为像我一样的初学者提供方便——推荐给初学者的一本书:<Linux ...
- python全栈开发学习_内容目录及链接
python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...