绝对定位的层如何做到上下左右居中

绝对定位的层div如何做到上下左右居中

作者: cloudgamer 发布时间: 2010-09-24

<!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>div内容图片垂直水平居中</title> <style type="text/css"> .psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; } .psdthumb .img_wrap {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; } .psdthumb .img { *position:absolute; top:50%; } .psdthumb .img img { *position:relative; top:-50%; left:-50%; } </style> </head> <body> <div class="psdthumb"> <div class="img_wrap"> <div class="img"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div> </div> <div class="img_wrap"> <div class="img"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: display 发布时间: 2010-09-24

如果页面高度设置是100%就可以，但这就有很大限制。因此最好用脚本。

作者: yoom 发布时间: 2010-09-24

谢谢
但不是我要的
我想实现的是

<!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 type="text/css"> .psdthumb { border:1px solid #000; width:500px; height:500px; position:relative;} .psdthumb div{ left:50%; top:50%; position:absolute;} .img_wrap1 {border:10px solid #aaa; width:240px; height:160px; margin-left:-125px; margin-top:-85px; } .img_wrap2 {border:10px solid #aaa; width:50px; height:50px; margin-left:-30px; margin-top:-30px; } </style> <div class="psdthumb"> <div class="img_wrap1"> </div> <div class="img_wrap2"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

但由于层的内容会变化即大小会变化
这样就比较麻烦了

[ 本帖最后由 cloudgamer 于 2010-9-24 17:45 编辑 ]

作者: cloudgamer 发布时间: 2010-09-24

不需要在页面
在层就可以

作者: cloudgamer 发布时间: 2010-09-24

<!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=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>垂直水平居中</title> <style> #parent { height:1000px; position:relative;} </style> <script type="text/javascript"> jQuery.fn.center = function (absolute) { return this.each(function () { var t = jQuery(this); t.css({position:absolute ? 'absolute' : 'fixed',left:'50%',top:'50%',zIndex:'99'}) .css({marginLeft:'-'+(t.outerWidth()/2)+'px', marginTop:'-'+(t.outerHeight()/2)+'px'}); if (absolute) { t.css({ marginTop:parseInt(t.css('marginTop'),10) + jQuery(window).scrollTop(), marginLeft:parseInt(t.css('marginLeft'),10) + jQuery(window).scrollLeft() }); } }); }; </script> </head> <body> <div id="parent"> <p style="height:30px; line-height:30px; background:#388665; padding:0 24px; z-index:1000;">我在浏览器窗口的正中,请随便添加内容。</p> <p>当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～当我不存在～</p> <p style="height:30px; line-height:30px; background:#acacac; padding:0 24px; z-index:100;">我在父级元素范围的正中，改变一下 #parent 的高度看看。请随便添加内容。 </p> </div> <script type="text/javascript"> $('#parent p:first-child').center().css('z-index','100');//在浏览器窗口的正中 $('#parent p:last-child').center(true);//在父级元素范围的正中 </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: display 发布时间: 2010-09-24

绝对定位的层如何做到上下左右居中

热门阅读

热门下载