怎么让一个DIV绝对定位到页面的正中间

点击回访按钮之后,弹出这个层,双击层之后这个层消失... 点击回访按钮之后,弹出这个层,双击层之后这个层消失展开

 我来答

4个回答

#热议# 为什么有人显老，有人显年轻？

小小欧平儿

高粉答主

2019-06-12 · 说的都是干货，快来关注

知道答主

回答量：1039

采纳率：100%

帮助的人：16.9万

我也去答题访问个人页

关注

展开全部

1、首先，新建一个html文件。

2、在html文件上找<body>标签，在<body>标签中创建<div>标签并设置class类：

<div>

fixed浮动居中

</div>

3、对div设置基本属性。html文件找到<title>标签，在这个标签后新建一个<style>标签，然后在<style>标签里设置class类为fixed的属性为：宽为300像素，高为150像素，背景为红色，相对于浏览器窗口定位，距离浏览器顶部位置为20%。样式代码：

<style>

.fixed{

width: 300px;

height: 150px;

background-color: red;

position: fixed;

top: 20%;

}

</style>

4、查看样式效果，保存html文件后使用浏览器查看设置的效果。

5、设置position:fixed 居中。为了给div自动居中显示，只需要在fixed类中再添加：

left: 0;

right: 0;

margin:0 auto;

6、查看居中效果。保存html文件后使用浏览器打开，就绝对居中了。

已赞过 已踩过<

评论收起

一平有曦曦
2013-05-24 · TA获得超过1689个赞

知道小有建树答主

回答量：876

采纳率：40%

帮助的人：237万

我也去答题访问个人页

关注

展开全部

<div style="border:1px solid red;width:500px;height:380px;position:absolute;left:50%;margin-left:-250px;top:50%;margin-top:-190px;">让他水平垂直居中</div>

试试这个代码能否帮到你！position为absolute；不是relative！

追问

怎么点击回访按钮之后,弹出这个层,双击层之后这个层消失

追答

这个要用js了，我这个不会，看哪个高手帮你！

本回答被提问者采纳

已赞过 已踩过<

评论收起

投影人生
2013-05-24 · TA获得超过107个赞

知道答主

回答量：168

采纳率：100%

帮助的人：130万

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

依然幻吟枫
2013-05-24 · TA获得超过433个赞

知道小有建树答主

回答量：197

采纳率：0%

帮助的人：135万

我也去答题访问个人页

关注

展开全部

就是一个弹出层

function ShowDiv(id)
{
this.oDiv=document.getElementById(id);
}

ShowDiv.prototype.show=function()
{
var _this=this;
this.cDiv=document.createElement("div");
this.cDiv.style.width="100%";
this.cDiv.style.height=document.documentElement.scrollHeight+"px";

this.cDiv.style.cssText+=" ;position:absolute;top:0px;left:0px;background:#000;opacity:0.5;filter:alpha(opacity:50);z-index:9998";
document.body.appendChild(this.cDiv);
var h2=document.documentElement.scrollTop||document.body.scrollTop;
this.oDiv.style.top=h2+200+"px";
this.oDiv.style.cssText+=" ;position:absolute;left:50%;display:block;z-index:9999;";
this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";
myAddEvent(window,"scroll",function(){
var h=document.documentElement.scrollTop||document.body.scrollTop;
_this.oDiv.style.top=h+200+"px"
})
}

ShowDiv.prototype.close=function()
{
var _this=this;
_this.oDiv.style.display="none";
document.body.removeChild(_this.cDiv);
_this.cDiv=null;
}
function myAddEvent(obj,sEvent,fn)
{
obj.addEventListener?obj.addEventListener(sEvent,fn,false):obj.attachEvent("on"+sEvent,function(e){
fn.call(obj,e);
})
}

var p1=new ShowDiv("你想要的DIV的ID");
然后在显示按钮上加 onclick="p1.show()" 在关闭按钮上加 onclick="p1.close()"

带运动的

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试练习</title>
</head>
<body style="">
<input type="button" value="btn1" onclick="p1.show()">
<div id="con">
<input type="button" value="btn2" onclick="p1.close()">
</div>
<style>
*{margin:0;padding:0}
#con{width:500px;height:200px;background:red;display:none}
html{overflow:auto}
</style>
<script type="text/javascript">
function ShowDiv(id)
{
this.oDiv=document.getElementById(id);
}

ShowDiv.prototype.show=function()
{
var _this=this;
this.cDiv=document.createElement("div");
document.getElementsByTagName("html")[0].style.overflow="visible"; //兼容IE67
document.body.style.overflow="hidden"; //取消浏览器滚动条

this.cDiv.style.width="100%";
this.cDiv.style.height="100%";

if (window.ActiveXObject){
var ua = navigator.userAgent.toLowerCase();
var ie=ua.match(/msie ([\d.]+)/)[1]
if(ie==6.0||ie==7.0){
this.cDiv.style.height=document.documentElement.clientHeight+"px";
myAddEvent(window,"resize",function()
{
_this.cDiv.style.height=document.documentElement.clientHeight+"px";
});
}
}

this.cDiv.style.cssText+=" ;position:absolute;top:0px;left:0px;background:#000;opacity:0;filter:alpha(opacity:0);z-index:9998";
document.body.appendChild(this.cDiv);

this.oDiv.style.cssText+=" ;position:absolute;left:50%;top:50%;z-index:9999;";
this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";
this.oDiv.style.marginTop=-parseInt(_this.oDiv.offsetHeight/2)+"px";

startMove(this.cDiv,{opacity:50},function(){
_this.oDiv.style.display="block";
_this.h2=document.documentElement.clientHeight || document.body.clientHeight;
_this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";
_this.oDiv.style.marginTop=-parseInt(_this.oDiv.offsetHeight/2)+"px";
})

}

ShowDiv.prototype.close=function()
{
var _this=this;
this.oDiv.style.display="none";

startMove(_this.cDiv,{opacity:0},function()
{
document.body.removeChild(_this.cDiv);

document.getElementsByTagName("html")[0].style.overflow="auto"; //兼容IE67
document.body.style.overflow="auto"; //恢复浏览器滚动条
this.cDiv=null;
})

}
function myAddEvent(obj,sEvent,fn)
{
obj.addEventListener?obj.addEventListener(sEvent,fn,false):obj.attachEvent("on"+sEvent,function(e){
fn.call(obj,e);
})
}

function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}

function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;

if(attr=='opacity')
{
iCur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed=(json[attr]-iCur)/5;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}

if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);

if(fn)
{
fn();
}
}
}, 30)
}

var p1=new ShowDiv("con");

</script>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

已赞过 已踩过<

评论收起

1条折叠回答

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎么让一个DIV绝对定位到页面的正中间

其他类似问题

为你推荐：