插件描述：如何用CSS＆jQuery的垂直和水平方向的固定的或流体的div居中。
如何用CSS＆jQuery的垂直和水平方向的固定的或流体的div居中。
使用步骤
居中使用纯CSS元素的方法有很多。下面的脚本有用纯CSS不切确（例如流体布局，元素高度是未知等）时的情况。中心内一个div其父元素的关键，越来越宽或越来越高，并正确设置它的CSS位置。使用jQuery，我们可以很容易地获取这些值，即使他们没有在CSS或者他们设置为百分比。然后，我们可以居中所需的计算和应用元素（S）上的输出值。
例如，下面的标记是一个流体宽度高度设置为“ 自动“的 div ：
No wrapHTML
1 2 3 | <body><div id="myDiv">居中内容数据 </div></body> |
No wrapCSS
1 2 3 4 5 6 7 8 9 | body{ margin:0; padding:0;}#myDiv{ width:70%; height:auto; background:#ccc;} |
＃myDiv在其父元素，我们将创建一个jQuery功能，并通过作为其选择的div的id。
首先，您的html文件头标签里面包括jQuery库：
1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <script> (function($){ $(document).ready(function(){ $.fn.center=function(){ return this.each(function(){ var $this=$(this), parent=$this.parent(), topPos, topMargin, leftMargin, resizeTimeout; if(parent.is("body:not(.root-height-set)")){ $("html,body").css("height","100%").addClass("root-height-set"); } if($this.css("position")==="absolute" || $this.css("position")==="fixed"){ topPos="50%"; topMargin="-"+Math.round($this.outerHeight()/2)+"px"; leftMargin="-"+Math.round($this.outerWidth()/2)+"px"; $this.css({"left":"50%","margin-left":leftMargin}); }else{ topPos=Math.floor((parent.height()-$this.outerHeight())/2); topMargin="auto"; $this.css({"position":"relative","margin-left":"auto","margin-right":"auto"}); } $this.css({"top":topPos,"margin-top":topMargin}); $(window).resize(function(){ if(resizeTimeout){ clearTimeout(resizeTimeout); } resizeTimeout=setTimeout(function(){ if($this.css("position")==="absolute"){ topMargin="-"+Math.round($this.outerHeight()/2)+"px"; leftMargin="-"+Math.round($this.outerWidth()/2)+"px"; $this.css({"margin-left":leftMargin,"margin-top":topMargin}); }else{ topPos=Math.floor((parent.height()-$this.outerHeight())/2); $this.css("top",topPos); } },150); }); }); } }); })(jQuery);</script> |
下面是完整的页面标记看起来像这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"><title>Center div with jQuery demo</title><style type="text/css">body{ margin:0; padding:0;}#myDiv{ width:70%; height:auto; background:#ccc;}</style></head><body><div id="myDiv"> Lorem ipsum dolor sit amet, consectetur adipisicing elit</div><script> (function($){ $(document).ready(function(){ $.fn.center=function(){ return this.each(function(){ var $this=$(this), parent=$this.parent(), topPos, topMargin, leftMargin, resizeTimeout; if(parent.is("body:not(.root-height-set)")){ $("html,body").css("height","100%").addClass("root-height-set"); } if($this.css("position")==="absolute" || $this.css("position")==="fixed"){ topPos="50%"; topMargin="-"+Math.round($this.outerHeight()/2)+"px"; leftMargin="-"+Math.round($this.outerWidth()/2)+"px"; $this.css({"left":"50%","margin-left":leftMargin}); }else{ topPos=Math.floor((parent.height()-$this.outerHeight())/2); topMargin="auto"; $this.css({"position":"relative","margin-left":"auto","margin-right":"auto"}); } $this.css({"top":topPos,"margin-top":topMargin}); $(window).resize(function(){ if(resizeTimeout){ clearTimeout(resizeTimeout); } resizeTimeout=setTimeout(function(){ if($this.css("position")==="absolute"){ topMargin="-"+Math.round($this.outerHeight()/2)+"px"; leftMargin="-"+Math.round($this.outerWidth()/2)+"px"; $this.css({"margin-left":leftMargin,"margin-top":topMargin}); }else{ topPos=Math.floor((parent.height()-$this.outerHeight())/2); $this.css("top",topPos); } },150); }); }); } $("#myDiv").center(); }); })(jQuery);</script></body> </html> |
为了使脚本更容易使用和实施上的任何页面或项目，你可以将。js文件中的函数（如center.js）和它，而不是在每一页上有jQuery代码包括：
1 2 3 4 | <script src="center.js"></script><script> (function($){ $(document).ready(function(){ $("#myDiv").center(); }); })(jQuery);</script> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 通用的iframe弹层插件
- 下一个特效： jquery hotspot图片焦点区域标记鼠标滑过提示