绝对定位的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- ...
随机推荐
- 关于卫星RNSS与RDSS
名词解释:RNSS与RDSS 服务于用户位置确定的卫星无线电业务有两种.一种是卫星无线电导航业务,英文全称Radio Navigation Satellite System,缩写RNSS,由用户接收卫 ...
- Java @SuppressWarnings
@SuppressWarnings() 注解以@开头可以接受参数 @SuppressWarnings("unchecked") 不受检查的警告信息应该被抑制 //: holding ...
- C# TabControl 隐藏标签头(TabControl Hide Head)
TabControl控件,有时候需要动态显示一个或者多个标签页,如果只是显示一个标签页的时候不想显示标签头,所以有可能隐藏头部的需求. 如下代码可以实现 public Form1() { Initia ...
- 《精通Python设计模式》学习结构型之MVC模式
这个就不需要多评论了, 哪个主流的PYTHON的WEB框架都有这些模式实现哈. quotes = ('A man is not complete until he is married. Then h ...
- ASP.NET MVC下判断用户登录和授权状态方法
在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization),则对于某种用户角色才开放. 在a ...
- 《Android源码设计模式》--状态模式--责任链模式--解释器模式--命令模式--观察者模式--备忘录模式--迭代器模式
[状态模式] No1: Wifi设置界面是一个叫做WifiSetting的Fragment实现的 No2: 在不同的状态下对于扫描Wifi这个请求的处理是完全不一样的.在初始状态下扫描请求被直接忽略, ...
- 关于CSRF的那点事儿
0x01 CSRF简介 CSRF,也称XSRF,即跨站请求伪造攻击,与XSS相似,但与XSS相比更难防范,是一种广泛存在于网站中的安全漏洞,经常与XSS一起配合攻击. 0x02 CSRF原理 ...
- 自定义JSP标签示例
我们以一个例子来讲解如何自定义JSP标签,假如我们需要在页面中输出当前的时间,按照最简单的JSP脚本,需要在JSP里面写很多Java代码,那么如何来使用自定义标签实现这个功能呢? 首先,我们要先创建一 ...
- java jdbc深入理解(connection与threadlocal与数据库连接池和事务实)
1.jdbc连接数据库,就这样子 Class.forName("com.mysql.jdbc.Driver");java.sql.Connection conn = DriverM ...
- 推荐:这才是你寻寻觅觅想要的 Python 可视化神器
Plotly Express 是一个新的高级 Python 可视化库:它是 Plotly.py 的高级封装,它为复杂的图表提供了一个简单的语法. 受 Seaborn 和 ggplot2 的启发,它专门 ...