问题:

Does anyone know of any jQuery Script that will keep a div centered in the middle and when the window is re-sized, it will also keep it centered? I am building a lightbox plugin and I need it to stay in the middle. I tried using CSS but it doesn't work.

Also I need it to stay in the middle when another box is opened that has a bigger width and height. Here's the page with examples on it:

http://wowbox.yolasite.com/

Open the image first, and then open the div, and you'll see what I mean. The div is not centered. But then when you close and re-open the div it is centered because of the .center() that happens when you click on a WowBox link. I just need it to always be centered, and never mess up like that.

Here is the code I'm currently using to center it:

  jQuery.fn.center = function () {     this.css("position","absolute");     this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");     this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");     return this;   }

I want to make it where when the window re-sizes, it will stay centered. I also want to make it where when the width of the box gets wider and the height gets taller, it will re-center. Right now it doesn't work right.

Could anyone help with this?

Thanks in advance,

Nathan

回答1:

Try that along with the example code you already have. For clarification:

jQuery.fn.center = function () {     this.css("position","absolute");     this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");     this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");     return this; }  $(document).ready(function(){    $('.element').center();    window.onresize = function(event) {         $('.element').center();     } });

回答2:

-----------------This works---------------------

CSS

       .box{     width:200px;     top:-5px;       position:relative;     background:#444; } .inner {     height:0px;     width:0px;     background:#444;     top:50%;     left:50%;     right:50%;     bottom:50%;     position:relative; }

.outer { height:200px; width:400px; border:2px dotted red; }

HTML

<div class="outer"> <div class="inner">     <div class="box">         wpfw efuiweh fuiwehf weuifh weuifh fuihwe fuihwefuiweh uwehf iuwehf uiwefhweuifh weuifhwe fuiweh fuiwehfuiwefh uiwefh weuifh weuifh weuifhwe uifh weuifhwefuiweh fuiweh fuiwehf iweufh weuih     </div> </div> </div>

jQuery

$(function(){     $(".box").css('top',-($(".box").height()/2));     $(".box").css('left',-($(".box").width()/2)); });

Please let me know if that doesn't do what you want it to. You can even see on http://jsfiddle.net/mazlix/m4Ttk/2/ that resizing the inner our outer divs will still keep it centered.

回答3:

for fixed-size fits example http://jsfiddle.net/expert/vh2vy/5/

转载请标明出处:How do I center a div in the middle of the page using jQuery and keep it centered when window is re-sized?

文章来源: How do I center a div in the middle of the page using jQuery and keep it centered when window is re-sized?

标签

div