绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
详细解说,直接看样式:
#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;
width:600px;height:300px;
display:block;
position: absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-150px;}
padding:10px;background-color:#003300;color:#FFFFFF; 这几句都是装饰性的东西不是核心;
width:600px;height:300px; DIV总的有个宽高吧,根据你的具体情况设置;
display:block; 把DIV以块级元素显示;
position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px; 这一段时重点,我想聪明的朋友都看明白了。
就是绝对定位DIV层,当然你应该让他相对于body标签。margin-left:-300px; 这个值是DIV宽度的一半, margin-top:-150px; 是DIV高度的一半。
绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。的更多相关文章
- 层居中绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器
详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- div上下左右居中方法
方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div居中方法总结
在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看! 1. 水平居中:给div设置一个宽度,然后添加marg ...
- div纵向居中的方法(转载)
方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper"> ...
- 让绝对定位的div居中
最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px margin- ...
随机推荐
- HDU 3360 National Treasures(最小点覆盖)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3360 题目大意: 在一个n*m的格子中,每个格子有一个数值,-1表示空,其余表示财宝.每个财宝的数值转 ...
- $()与document.getElementById
$('#a')是返回一个jquery对象 $('#a')[0]是一个element对象 document.getElementById('a') return 一个element对象
- 毕设demo写好
2015年1月20日 14:41:47 阶段性暂停!! 把运行结果截图给了老师,老师说先整理下文档,然后下学期来了再部署到服务器上. 那么,下学期来了,估计也要把Epm和CR1000什么的搞好了. 先 ...
- 【PAT】1016 部分A+B(15 分)
1016 部分A+B(15 分) 正整数 A 的“DA(为 1 位整数)部分”定义为由 A 中所有 DA 组成的新整数 PA.例如:给定 A=3862767,DA=6,则 A ...
- bzoj 1820 dp
最普通dp要4维,因为肯定有一个在上一个的位置,所以可以变为3维,然后滚动数组优化一下. #include<bits/stdc++.h> #define LL long long #def ...
- 黑马程序员_java基础笔记(10)...JDK1.5的新特性
—————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流! —————————— 1:静态导入.2:for—each循环.3:自动装箱/拆箱.4:可变参数.5:枚举 ...
- JavaScript对象参考手册
1.array 属性: constructor 返回原型函数: length 数组个数: prototype 向对象添加属性和方法 方法: concat() 连接两个或多个数组,并返回结果: fill ...
- 基于Thinkphp3.2的qq第三方oauth认证登录扩展类
基于Thinkphp3.2的qq第三方oauth认证登录扩展类,由于腾讯oauth sdk写的太多,不能与thinkphp和好的结合,最终想法讲腾讯oauth sdk写成tp的扩展类先看代码,将代码保 ...
- 关于谷歌浏览器62版本之后引用video.js不能自动播放的问题(Cross-origin plugin content from http://vjs.zencdn.net/swf/5.0.0-rc1/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked.)
Cross-origin plugin content from http://vjs.zencdn.net/swf/5.0.0-rc1/video-js.swf must have a visibl ...
- yum安装(sentos7)
之前我的yum一直出问题,我就重装了yum,这个教程是我亲自测试过,有用的. 链接:http://blog.csdn.net/iamhuanggua/article/details/60140867 ...