怎么让一个DIV绝对定位到页面的正中间 css怎么让定位的那个层显示在浏览器的正中间
css\u7b14\u8bb0\uff1a\u5982\u4f55\u8ba9\u4e00\u4e2adiv\u5c45\u4e8e\u9875\u9762\u6b63\u4e2d\u95f4div\u8bbe\u7f6e\u4e3a\u7edd\u5bf9\u5b9a\u4f4d top 50% left 50% margin-top -\u9ad8\u5ea6\u7684\u4e00\u534apx \uff0c marginleft \u5bbd\u5ea6\u7684\u4e00\u534apx \uff0cmargin\u7684\u90fd\u662f\u8d1f\u6570
\u53ef\u4ee5\u7528css\u5b9a\u4f4d\u8ba9\u6307\u5b9a\u5c42\u5728\u6d4f\u89c8\u5668\u6b63\u4e2d\u95f4\u3002
1\u3001\u65b0\u5efahtml\u6587\u6863\uff0c\u5728body\u6807\u7b7e\u4e2d\u6dfb\u52a0\u4e00\u4e2adiv\u6807\u7b7e\uff0c\u4e3a\u8fd9\u4e2a\u6807\u7b7e\u8bbe\u7f6e\u5bbd\u9ad8\uff0c\u8fd9\u91cc\u4ee5200px\u4e3a\u4f8b\uff1a
2\u3001\u6dfb\u52a0\u5b9a\u4f4d\u4ee3\u7801\u201cposition: absolute;\u201d\uff0c\u5e76\u4e14\u8bbe\u7f6e\u76f8\u5bf9\u5de6\u4fa7\u548c\u9876\u90e8\u7684\u8ddd\u79bb\u4e3a\u201c50%\u201d\uff1a
3\u3001\u6700\u540e\u8bbe\u7f6e\u6307\u5b9a\u5c42\u7684\u5de6\u5916\u8fb9\u8ddd\u548c\u9876\u5916\u8fb9\u8ddd\u7684\u5927\u5c0f\u4e3a\u6307\u5b9a\u5c42\u5bbd\u9ad8\u7684\u4e00\u534a\uff0c\u8fd9\u65f6\u6307\u5b9a\u5c42\u5c31\u4f1a\u5728\u6d4f\u89c8\u5668\u7684\u6b63\u4e2d\u95f4\uff1a
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文件后使用浏览器打开，就绝对居中了。
<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！
<style type="text/css">
#box{
postion:absolute;
left:50%;
right:50%;
margin-left:-50px; /* 这个是你box宽的一半 */
margin-right:-70px; /* 这个是你box高的一半 */
}
</style>
<div id="box">内容
</div>
就是一个弹出层
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>
绛旓細鐢ㄧ粷瀵瑰畾浣嶏紝鎶婁袱涓兘鏀惧湪涓涓ぇ鐨凞IV閲岄潰锛屽ぇ鐨勮缃垚position:relaitve銆傜涓涓皬DIV灞炴ц缃垚涓簆osition:absolute; z-index:1銆傜浜屼釜灏廌IV灞炴ц缃垚涓簆osition:absolute; z-index:2銆倃idth銆乭eight銆乴eft鍜宼op瑙嗘儏鍐佃屽畾銆傛敞锛1銆佺埗绾iv鐢ㄧ浉瀵瑰畾浣峱osition:relative,瀛愮骇div鐢ㄧ粷瀵瑰畾浣峱osition:ab...
绛旓細姝ｇ‘鐨勮В鍐虫柟娉曞氨鏄湪鍏冪礌鐨勭埗绾у厓绱犲畾涔変负position:relative;(鏇存:杩欓噷鍙互鏄鐖剁骇,涔熷彲浠ユ槸position:absolute;)闇瑕佺粷瀵瑰畾浣嶇殑鍏冪礌璁句负position:absolute;杩欐牱鍐嶈瀹歵op,right,bottom,left鐨勫煎氨鍙互浜,杩欐牱鍏跺畾浣嶇殑鍙傜収鏍囧噯灏辨槸鐖剁骇鐨勫乏涓婅padding鐨勫乏涓婁晶!***CSS鍗曞厓鐨勪綅缃拰灞傛-div鏍囩 鎴戜滑閮界煡閬,鍦ㄧ綉椤典笂...
绛旓細1銆侀鍏堬紝鏂板缓涓涓html鏂囦欢銆2銆佸湪html鏂囦欢涓婃壘<body>鏍囩锛屽湪<body>鏍囩涓垱寤<div>鏍囩骞惰缃甤lass绫伙細<div> fixed娴姩灞呬腑 </div> 3銆佸div璁剧疆鍩烘湰灞炴с俬tml鏂囦欢鎵惧埌<title>鏍囩锛屽湪杩欎釜鏍囩鍚庢柊寤轰竴涓<style>鏍囩锛岀劧鍚庡湪<style>鏍囩閲岃缃甤lass绫讳负fixed鐨勫睘鎬т负锛氬涓300鍍忕礌锛岄珮涓150鍍忕礌...
绛旓細寤鸿浣跨敤css瀹炵幇锛屾晥鏋滄洿浣筹紝浣跨敤position: fixed锛屽浐瀹氬畾浣嶏紝鍏蜂綋浣嶇疆鐨勮皟鏁存槸鐢╰op銆乴eft銆乺ight銆乥ottom涔熷彲浠ヤ娇鐢╩argin璋冩暣 css瀹炵幇浠ｇ爜 <div style="position: fixed;top:100px; left: auto; right: auto; bottom: auto; " ></div> 涓鑸殑缃戠珯鐨勬诞鍔ㄥ箍鍛婁互鍙婃诞鍔ㄨ彍鍗曠瓑鍙互浣跨敤fixed鏉ュ疄鐜帮紝js...
绛旓細1銆侀鍏堬紝鍒涘缓涓涓猟iv锛屽涓嬪浘鎵绀猴紝鐒跺悗杩涘叆涓嬩竴姝ャ2銆佸叾娆★紝瀹屾垚涓婅堪姝ラ鍚庯紝闇瑕佺粰鍏禖lass灞炴э紝濡備笅鍥炬墍绀猴紝鐒跺悗杩涘叆涓嬩竴姝ャ3銆佹帴鐫锛屽畬鎴愪笂杩版楠ゅ悗锛屼娇鐢–SS閫氳繃Class灞炴т负鍏惰缃牱寮忥紝濡備笅鍥炬墍绀猴紝鐒跺悗杩涘叆涓嬩竴姝ャ4銆佺劧鍚庯紝瀹屾垚涓婅堪姝ラ鍚庯紝闇瑕佺粰鍏朵竴涓搴﹀拰楂樺害锛屽啀鍔犱笂杈规锛屽涓嬪浘...
绛旓細鎯宠鍥哄畾div鍦缃戦〉涓寚瀹氱殑浣嶇疆锛屽彲浠ュ姞涓涓狢SS灞炴э細div{ position:absolute;//缁濆瀹氫綅锛岃繖涓槸闅椤甸潰璧板姩鐨勶紝鍙互鎹㈡垚fixed锛屼笉闅忛〉闈㈣蛋鍔ㄣ left:0; top:0; z-inde:111111; width:1440px; height:36px; background:red;}瑕佹兂鐢ㄥ畾浣嶅繀椤鏈変竴涓鏄弬鐓х墿锛屾墠鍙互灏嗕綘瑕佸浐...
绛旓細position:absolute灏辨槸缁濆瀹氫綅銆備綘鍙互閰嶅悎top left bottom right杩欏嚑涓睘鎬ф潵灏div杩涜缁濆瀹氫綅銆傛棦鐒朵綘鐜板湪瑕佹斁鍦ㄥ彸涓婅灏辨槸浣跨敤position:absolute锛屽苟涓旇缃畉op銆乺ight鐨勬暟鍊笺傞渶瑕佹敞鎰忕殑鏄紝缁濆瀹氫綅鏄牴鎹鍏冪礌璁剧疆浜唒osition灞炴х殑鐖跺厓绱犲畾浣嶇殑銆傚鏋滆鍏冪礌鐨勬瘡涓绾х埗鍏冪礌鐨刾osition閮芥槸榛樿鍊硷紝閭ｄ箞浠...
绛旓細棣栧厛鎴戜笉缁div瀹氫綅鏉ョ湅鐪嬩袱涓猟iv鍦娴忚鍣ㄤ腑鏄浣曟樉绀虹殑锛屽叿浣撶殑浠ｇ爜濡備笅锛 html head titleCSSdiv瀹氫綅/title style type="text/css" .div1{ height:100px; width:100px; border-style:solid; border-color:red; border-width:10px; background-color:yellow; } .div2{ height:100px...
绛旓細鍦ㄥ墠绔噷闈紝濡備綍灏涓涓猟iv鍥哄畾鍦ㄦ煇涓綅缃紝灞炰簬css鍐卲osition瀹氫綅鐨勫唴瀹广俻osition瀹氫綅灞炴ф湁浜旂绫诲瀷锛屽垎鍒涓嬶細1.static 瀹氫綅銆俬tml鍏冪礌鐨勯粯璁ゅ硷紝鍗虫病鏈夊畾浣嶏紝閬靛惊姝ｅ父鐨勬枃妗ｆ祦瀵硅薄銆傞潤鎬佸畾浣嶇殑鍏冪礌涓嶄細鍙楀埌 top, bottom, left, right褰卞搷銆2.fixed 瀹氫綅銆傚厓绱犵殑浣嶇疆鐩稿浜庢祻瑙堝櫒绐楀彛鏄浐瀹氫綅缃傚嵆浣...
绛旓細1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔涓涓猟iv锛岀劧鍚庡湪杩欎釜div涓啀娣诲姞涓涓猟iv锛岃繖鏃堕粯璁ゆ儏鍐典笅鍐卍iv鍦ㄥdiv鐨勫乏涓婅锛2銆佷负鍐卍iv娣诲姞鈥減osition鈥濆睘鎬э紝灞炴у间负鈥渁bsolute鈥濓紝澶杁iv娣诲姞鈥減osition鈥濆睘鎬э紝灞炴у间负鈥渞elative鈥濓紝杩欐椂鍐卍iv浼氬悜澶div缁濆瀹氫綅锛3銆佷负鍐卍iv璁剧疆璺濈椤堕儴璺濈灞炴р渢op鈥濆拰璺濈...
