当前位置:编程学习 > html/css >>

DIV浮动层绝对居中定位用CSS怎么写?

DIV浮动层绝对居中定位用CSS怎么写?下面的写法兼容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高度的一半。

----------------------------------------------------------------------------------

如何DIV(图层)让浮动居中
不知道DIV浮动层的宽度,高度,如何使浮动层在任何分辩率的情况下居中! 

<html> 
<head> 
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"> 
<title>   *   emu   *   </title> 
<SCRIPT> 
<!-- 
window.onresize   =   resetDIV; 
function   resetDIV() 
            { 
            with(document.getElementsByTagName("DIV")[0].style) 
                        { 
                        left   =   (document.body.offsetWidth-parseInt(width))/2 
                        top   =   (document.body.offsetHeight-parseInt(height))/2 
                        } 
            } 
//--> 
</SCRIPT> 
</head> 
<body   onload="resetDIV()"> 
<div   style="position:absolute;width=200;height=200;background-color=yellow"></div> 
</body> 
</html> 

这个可以根据页面的变化动态改变层的位置。

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,