如何使用 jQuery 在页面中间居中 div 并在重新调整 window 大小时使其居中？

Question

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

Answer 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();
    }
});

Answer 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.

Answer 3

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