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以下的浏览器
最新文章
- SQLServer 2008 R2 对同时含有数字和中文的字段进行排序
- HDU 4348 To the moon 可持久化线段树
- 关于P,V操作理解的分析
- MYBATIS报ORA-01745: 无效的主机/绑定变量名 异常
- int main(int argc,char* argv[]) 简单理解
- USB CDC类
- dedecms 常用标签
- MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ...
- 浏览器中的user-agent的几种模式
- Codeforces.954I.Yet Another String Matching Problem(FFT)
- kafka-producer partitioner.class的使用
- MySQL优化(三) 表的设计
- 再战android-语音识别2(修改配置)
- 腾讯云短信服务使用记录与.NET Core C#代码分享
- 九度OJ1108-堆栈的使用
- 美团开源 SQL 优化工具 SQLAdvisor
- maven 插件jetty/tomcat启动 web 应用
- Servlet Rest
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类
- 杂项:Webpack
热门文章
- Windows Phone Update3 (新分辨率 1080 x 1920 不会影响到现有WP8应用)
- ie11 兼容的问题
- 在SQL Server 2008中执行透明数据加密
- 生成Webservice的两种方式(Axis2,CXf2.x)
- mysql快速插入大数据
- .NET中Debug模式与Release模式差别
- 使用Team Explorer Everywhere (TEE) 2015 SDK获取团队项目的签入策略
- Tempdb--查看TempDB上是否需要增加文件
- MVC中控制器向视图传值的四种方式
- C#递归例程