详细解说,直接看样式:
#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. usb输入子系统写程序(三)

    目录 usb输入子系统写程序 小结 内核修改 怎么写代码 类型匹配 probe disconnect 程序设计 1th匹配probe 2th 获取usb数据 3th 输入子系统上报按键 title: ...

  2. 机器学习 - 损失计算-softmax_cross_entropy_with_logits

    tf.nn.softmax_cross_entropy_with_logits(logits, labels, name=None) 第一个参数logits:就是神经网络最后一层的输出 第二个参数la ...

  3. DirectX11 With Windows SDK--11 混合状态与光栅化状态

    前言 虽然这一部分的内容主要偏向于混合(Blending),但这里还需提及一下,关于渲染管线可以绑定的状态主要有如下四种: 光栅化状态(光栅化阶段) 采样器状态(像素着色阶段) 混合状态(输出合并阶段 ...

  4. NOI-OJ 2.2 ID:6261 汉诺塔

    思路 汉诺塔是递归思想最经典的例子,通过递归不断缩小问题,将n个盘子的问题简化n-1个,直至1个. 三个盘子,分别为A:from,B:to,C:by(A为起点盘,B为目标盘,C为中转盘) 过程 将1- ...

  5. 第四节:MVC中AOP思想的体现(四种过滤器)并结合项目案例说明过滤器的实际用法

    一. 简介 MVC中的过滤器可以说是MVC框架中的一种灵魂所在,它是MVC框架中AOP思想的具体体现,所以它以面向切面的形式无侵入式的作用于代码的业务逻辑,与业务逻辑代码分离,一经推出,广受开发者的喜 ...

  6. 关于使用 JSON.parse()报 VM141:1 Uncaught SyntaxError 的解决方案

    今天在使用ajax的后期,老师问我们怎么json解析对象,然后上百度搜了一下:大概有三个方式 var str = '{"name":"小明","age ...

  7. KL散度

    摘自: https://www.jianshu.com/p/43318a3dc715?from=timeline&isappinstalled=0 一.解决的问题 量化两种概率分布P和Q可以使 ...

  8. 网络学习day02_OSI七层模型及数据的传输过程

    title: 2018.9.2 OSI七层模型及数据的传输过程 tags: 计算机网络, OSI七层模型, 数据传输, 数据解封装 --- OSI七层模型和TCP/IP五层模型 OSI七层模型 我们说 ...

  9. Lambda表达式-聚合操作

    文章参考自博客:https://www.cnblogs.com/franson-2016/p/5593080.html 以及学习网站:how2java.cn 1.传统方式和聚合操作遍历数据的不同 传统 ...

  10. Stack的相关API

    public class Stack<E> extends Vector<E> : Stack类代表后进先出(LIFO)堆栈的对象. 它扩展了类别Vector与五个操作,允许一 ...