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

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

举报该文章

相关建议 2019-06-12

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文件后使用浏览器打开，就绝对居中了。

温馨提示：内容为网友见解，仅供参考

当前网址：https://aolonic.com/aa/ggka4wda5.html

其他看法

第1个回答 2013-05-24

<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了，我这个不会，看哪个高手帮你！

本回答被提问者采纳

第2个回答 2013-05-24

第3个回答 2013-05-24

就是一个弹出层

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>

html中如何让div居中
另一种方法是利用position属性，将div元素设置为绝对定位。将top和left值都设置为50%，可以让div在垂直和水平方向上居中。但同时，需要设置负的margin值，其大小等于子元素宽度或高度的一半。这种方法在配合定位使用时能确保div的居中效果。总结来说，理解并灵活运用这两种方法，即可轻松实现HTML中div元素的...

怎么让一个DIV绝对定位到页面的正中间
1、首先，新建一个html文件。2、在html文件上找<body>标签，在<body>标签中创建<div>标签并设置class类：<div> fixed浮动居中 <\/div> 3、对div设置基本属性。html文件找到<title>标签，在这个标签后新建一个<style>标签，然后在<style>标签里设置class类为fixed的属性为：宽为300像素，高为150像素...

如何div中的div居中cssdiv中的div怎么居中
方法一:使用绝对布局位置:absolutefordiv并设置top、left、right、bottom的值相等，但不一定都等于0；并设置边距:自动。方法二:这个方法需要知道div的宽度和高度。使用绝对布局位置:绝对用于div并将top和left的值设置为50%；50%是指页面窗口宽度和高度的50%；最后，将div向左上方移动div宽度和高度的一半。

怎么让div垂直居中呢?
.div1 { position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 150px;height: 150px;background-color: red;} 第二种方式 - transform：<template> <div id="app"> <div class="div1"><\/div> <\/template> css部分：.div1 { position: absolute;width: 150px...

如何将一个绝对定位的div水平垂直居中对齐
如果已经为div设置了绝对定位，希望在父级div（设置相对定位的元素）当中水平垂直居中，那么只需要设置top和left值即可 left值应当设置为 (父级div盒模型宽度 - 子级div盒模型宽度） \/ 2 top值则把上面的宽度换为高度即可

一个定宽高的div在另外一个div中水平垂直居中常用方法
要实现一个定宽高的 div 在另一个 div 中水平垂直居中，可以采用多种方法，以下是五种常见的实现方式：1、绝对定位法原理是子元素相对于父元素进行绝对定位。子元素首先向右下移动父元素宽度和高度的一半，然后自己再向相反方向移动自身宽度和高度的一半，从而达到居中效果。2、弹性盒法方法是开启父...

div标签如何居中div标签居中属性
1。创建一个新的html文件，命名为test.html，解释CSS如何使一个div居中。2.在test.html文件中，使用div标签创建一个模块来测试居中效果。3.在test.html文件中，将div的class属性设置为test，然后通过这个class属性设置它的css样式。4.编写标签，页面的css样式将被写入其中。5.在css标签中，设置div的...

CSS div居中的几种方法
方法一：对div使用绝对布局position:absolute;并设置top，left，right，bottom的值相等，但不一定都等于0；并且设置margin:auto。方法二：这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%；50%就是指页面窗口的宽度和高度的50%；最后将div左移和上移，...

div自动居于窗口的正中间的css是什么原理啊,看不太明白,哪位高手可以...
因为这个块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念：它是以最近一个已经定位的祖先为基准进行定位，如果没有就以屏幕定位！在这里（屏幕大小或祖先元素对于它来说就是100%）；top: 50%，就是在距屏幕上方或祖先元素50%，left: 50%，就是在距屏幕左方或祖先元素50%，因为它...

如何让一个DIV 居中在网页的中心。???
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。div { position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;width:400px;height:300px;border:1px solid...

相似回答

大家正在搜