详细解说，直接看样式：
#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系列浏览器和火狐浏览器的更多相关文章

  1. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  2. 绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。

    详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...

  3. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  4. div纵向居中的方法（转载）

    方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper"> ...

  5. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  6. 让绝对定位的div居中

    最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px  margin- ...

  7. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  8. HTML5：footer定位（底部+居中）的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  9. 左边图标右边文字，在div里居中

随机推荐

  1. [物理学与PDEs]第5章习题9 伴随矩阵的特征值

    设 $3\times 3$ 阵 ${\bf A}$ 的特征值为 $\lm_1,\lm_2,\lm_3$, 证明 $\cof {\bf A}$ 的特征值为 $$\bex \lm_2\lm_3,\quad ...

  2. [物理学与PDEs]第2章第4节 激波 4.1 间断连接条件

    1.  守恒律方程 $$\bex \cfrac{\p f}{\p t}+\cfrac{\p q}{\p x}=0 \eex$$ 在间断线上应满足 ``间断连接条件'': $$\bex [f]\cfra ...

  3. 别人的渗透测试（三）--SQL显错注入

    续上一章. 安全狗拦下7成的人,过狗是门学问,偷笑.jpg.很感谢和https://home.cnblogs.com/u/xishaonian/ 博主能一起研究过狗. 说多了,言归正传SQL注入大显错 ...

  4. 9、el表达式的使用

    一.EL表达式的作用: 1).使用变量访问web域中存储的对象 ${user } 2).访问javabean的属性   ${user.address.city } 3).执行基本的逻辑运算(el表达式 ...

  5. 高并发秒杀系统--SpringMVC整合

    [SpringMVC运行流程] [Handler注解映射技巧] [请求方法的细节处理] 1.如何处理请求参数和方法参数的绑定? 2.如何限制方法接收的请求方式? 3.如何进行请求转发和重定向? 4.如 ...

  6. js将时间戳转换为日期类型

    function getLocalTime(nS) {       var date = new Date(nS);    Y = date.getFullYear() + '年';    M = ( ...

  7. html超出显示省略号

    <span>装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花装备自动回收,躺的赚钱,收入比上班还要高,古天乐都乐开了花& ...

  8. CIA402状态转换图

    CIA402状态转换如下图所示: 要想改变参数并使其生效,需要先将状态转换到ready,然后修改要配置的参数,再使其运行(operation enabled). 要发送的报文顺序基本如下: 1)   ...

  9. psvm中String [] args 理解

    初学Java时,只是按部就班地写:public static void main(String [] args){} 却一直不知道参数说明作用,原来: 这个参数是默认从控制台中传递参数的. 运行这段程 ...

  10. Pygal之世界地图绘制from pygal.i18n import COUNTRIES 报错的解决办法

    在<Python编程:从入门到实践>书中的一个项目用到pygal.i18n获取国别码, 问题描述: 在学习<python编程:从入门到精通>的pygal绘制世界地图时,遇到了这 ...