详细解说,直接看样式:
#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的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器

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

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

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

  3. css:子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

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

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

  5. div上下左右居中方法

    方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...

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

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

  7. div居中方法总结

    在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看!        1. 水平居中:给div设置一个宽度,然后添加marg ...

  8. div纵向居中的方法(转载)

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

  9. 让绝对定位的div居中

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

随机推荐

  1. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  2. 产看Linux运行时间

    Linux下如何查看系统启动时间和运行时间 1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.0 ...

  3. numpy数学计算

    1.求范数 np.linalg.norm norm(x, ord=None, axis=None, keepdims=False)  范数理论的一个小推论告诉我们:ℓ1≥ℓ2≥ℓ∞

  4. python 常用的标准库及第三方库

    标准库Python拥有一个强大的标准库.Python语言的核心只包含数字.字符串.列表.字典.文件等常见类型和函数,而由Python标准库提供了系统管理.网络通信.文本处理.数据库接口.图形系统.XM ...

  5. 15 链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第k个结点. p1先走k-1步,p1 p2再一起走 C++: /* struct ListNode { int val; struct ListNode *next; L ...

  6. Python3 从入门到开车

    引:此文是自己学习python过程中的笔记和总结,适合有语言基础的人快速了解python3和没基础的作为学习的大纲,了解学习的方向.知识点:笔记是从多本书和视频上学习后的整合版. (一)初识pytho ...

  7. Wannafly挑战赛9 A - 找一找

    链接:https://www.nowcoder.com/acm/contest/71/A来源:牛客网 题目描述 给定n个正整数,请找出其中有多少个数x满足:在这n个数中存在数y=kx,其中k为大于1的 ...

  8. 使用Retrofit2调用HTTP API

    前言 Retrofit会将你的HTTP接口调用转换为java的interface,你不必去实现这个接口,交给Retrofit来创建动态代理. 首先,贴上官网和Javadoc. 官网上的例子 加依赖,下 ...

  9. C++运算符重载 模板友元 new delete ++ = +=

    今天的重载是基于C++ 类模板的,如果需要非类模板的重载的朋友可以把类模板拿掉,同样可以参考,谢谢. 一.类模板中的友元重载 本人喜好类声明与类成员实现分开写的代码风格,如若您喜欢将类成员函数的实现写 ...

  10. 标准c库函数与Linux下系统函数库 区别 (即带不带缓冲区的学习)

    我们都知道,C语言在UNIX/Linux系统下有一套系统调用(系统函数),比如文件操作open().close().write().read()等,而标准C语言的库函数中也有一套对文件的操作函数fop ...