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

详细解说,直接看样式:

#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高度的一半。

时间: 2024-10-28 13:10:14

绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。的相关文章

CSS Div完美居中方法

CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,自我感觉一下非常好用.而且以前我也没见过.所以今天就记一下.下次备用 HTML  代码如下 复制代码 <DIV class="demo center"> <DIV></DIV></DIV>CSS .center{ /* 需要宽度支持但自适应 */  position:relative; } .center>*{ /* ie8+,ie7-请使用js或者其它方法 */

CSS文字图片div元素居中方法之水平居中

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法

用火狐浏览器查看网页源代码的方法

  用火狐浏览器查看网页源代码的方法 火狐浏览器 用火狐浏览器查看网页源代码的方法: 1.下载并安装火狐浏览器,打开火狐浏览器; 2.用火狐浏览器打开指定网页; 3.对着网页鼠标右键,就会有一个查看源码; 源代码 4.点击进去就是这个网页的源码了.

火狐浏览器翻译日文网页方法

  现在,因为工作需要,不少人都需要使用翻译软件.不少人在问,火狐浏览器怎么翻译日文网页?其实,火狐浏览器为大家提供一个翻译功能,下面小编就给大家介绍火狐浏览器翻译日文网页方法 1.首先我们先打开火狐浏览器,网页翻译需要一个翻译方面的组件,进入"菜单"=="添加组件" 火狐浏览器 2.然后我们再下载一款翻译的组件,点击"安装" 火狐浏览器 3.重启火狐浏览器,打开你的要翻译的页面,右击在下拉中点击"网页翻译" 4.择你要翻译的

js+CSS实现弹出居中背景半透明div层的方法

 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

js+CSS实现弹出居中背景半透明div层的方法_javascript技巧

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

messagebox相对于div层居中解决方法

messagebox相对于div层居中解决方法 public void wndprocret(object sender, wndprocreteventargs e)         { switch (e.cw.message)             {                 case wndmessage.wm_initdialog:                 case wndmessage.wm_unknowinit:                     user3

如何让浮动的子DIV在父DIV上居中(水平方向和垂直方向)

问题描述 如何让浮动的子DIV在父DIV上居中(水平方向和垂直方向) 如题:如何让浮动的子DIV在父DIV上居中(水平方向和垂直方向) 解决方案 父容器relative定位,浮动div absolute定位,left和width 50%,定高和定宽,通过margin-left和margin-top为你的-宽度和-高度的一半来实现水平和垂直进行居中 解决方案二: http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/

css控制div不能居中的解决办法

  1.css控制div不能居中最容易犯的也最简单的就是没写DTD语句,不符合w3c规则,这个解决起来很容易,在页面的最上方加上: 就行了!其实还有很多css失效的问题也都是因为没有写dtd语句而引起的. 2.使用margin来让DIV居中 最简单的写法就是: .divtemp{ margin:0 auto; } 还可以这样: .divtemp{ margin-left:auto; margin-right:auto; } 这样就可以让DIV居中了! 用css控制div居中