详细解说,直接看样式:
#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. kubernetes云平台管理实战:如何创建deployment更好(九)

    一.文件创建带--record 1.文件 [root@k8s-master ~]# cat nginx_deploy.yml apiVersion: extensions/v1beta1 kind: ...

  2. GIT-Bonobo.Git.Server的使用

    GIT-Bonobo.Git.Server的使用 登录 (默认用户:admin/admin) 创建用户: 创建团队,勾选用户 创建新库 保存完成!

  3. python GUI 之 tkinter

    写一个 登陆窗口来学习 tkinter ,还剩下一些问题 代码暂时如下 import tkinter as tk import webbrowser import pickle from tkinte ...

  4. 关于使用python ~取反操作符带出的一系列问题

    晚上的时候,无意之间看到stackoverflow上面的一个编程挑战赛,各路高手各种搞事,看到python的地方突然发现用了很多位运算的符号,但是~符号引起了我和同事的注意. 我们很少在程序中使用这种 ...

  5. 算法第四版Question

    1.ECLIPES标准输入流 ①Run As-->Run Configurations-->Commom-->Input File在Input File里面输入要读取的文本文件 这对 ...

  6. 老是上不了 google scholar...

    这段时间老是上不了 google scholar... 下载了最新的 host 也不行. 难道真是电脑有问题了? 网络有时也老是掉... 也好. 多休息休息. 人生难得几回清闲. 马上就要开学咯. 课 ...

  7. [物理学与PDEs]第3章第2节 磁流体力学方程组 2.1 考虑到导电媒质 (等离子体) 的运动对 Maxwell 方程组的修正

    1.  Maxwell 方程组 $$\bee\label{3_2_1_Maxwell} \bea \Div{\bf D}&=\rho_f,\\ \rot{\bf E}&=-\cfrac ...

  8. javascript没有长整型

    记录一下前几天踩坑的经历. 背景:一个项目某一版之后很多用easyui的表格控件treegrid渲染的表格都显示不出来了 奇怪的地方主要有以下几点: 项目在测试环境才会这样,在本机能够正常运行,多次重 ...

  9. Java基础8-多线程;同步代码块

    作业解析 利用白富美接口案例,土豪征婚使用匿名内部类对象实现. interface White{ public void white(); } interface Rich{ public void ...

  10. 【转】Java中的static关键字解析

    一.static关键字的用途 在<Java编程思想>P86页有这样一段话: “static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没 ...