详细解说，直接看样式：
#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. B-树（B树）详解

    具体讲解之前,有一点,再次强调下:B-树,即为B树.因为B树的原英文名称为B-tree,而国内很多人喜欢把B-tree译作B-树,其实,这是个非常不好的直译,很容易让人产生误解.如人们可能会以为B-树 ...

  2. redis-sentinel高可用配置（2）

    一:说明 前面我们已经配置了redis的主从配置(链接),这种主从架构有一个问题,当主master出现了故障了,怎么切换到从服务器上呢? 第一种:手动切换, 这种肯定会造成比较长一段时间的用户不能访问 ...

  3. saltstack主机管理项目：主机管理项目架构设计(二)

    1.salt架构图 https://docs.saltstack.com/en/getstarted/system/plugins.html plug-ins(左边):场景可插拔 subsystem- ...

  4. IDEA破解

    1. 官网下载 idea激活 进入 C:\Windows\System32\drivers\etc  编辑host文件  加入0.0.0.0 account.jetbrains.com  2.打开ID ...

  5. NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions

    .NET Core 控制台程序没有 ASP.NET Core 的 IWebHostBuilder 与 Startup.cs ,那要读 appsettings.json.注依赖.配日志.设 IOptio ...

  6. [Android] Android 锁屏实现与总结 （三）

    上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...

  7. [物理学与PDEs]第3章第1节 等离子体

    1.  磁流体力学研究等离子体这种导电流体在电磁场中的运动. 2.  任何物质由于 $T, p$ 等条件的不同而可以处于固态.液态.气态 (常见的三种聚集态) 或等离子体. 3.  等离子体就是电离气 ...

  8. [物理学与PDEs]第1章第8节 静电场和静磁场 8.3 静磁场

    1. 静磁场: 由稳定电流形成的磁场. 2. 此时, Maxwell 方程组为 $$\beex \bea \Div{\bf D}&=\rho_f,\\ \rot {\bf E}&={\ ...

  9. python3 udp版简单的聊天器

    单任务的聊天系统. 获取键盘数据,并将其发送给对方 接收数据并显示 并且功能数据进行选择以上的2个功能调用 代码实现 import socket def send_msg(udp_socket): & ...

  10. vue全局引入scss文件（推荐）

    <template> <div id="app"> <router-view/> </div> </template> ...