Question

I want to make something really simple.
When I click a div I want to display some text centered on any resolution.

Here is my approach:

<button>Click</button>
<div id="fade"><a class="close" href="#">&#215;</a>
     <p>Lorem ipsum sit dolor amet</p>

 </div>

and this css:

#fade {background:red; width:100%; height:150px;}
.close {
color:white;
font:bold 40px Arial,Sans-Serif;
text-decoration:none;    
   }

Here is a jsfiddle
​

Now what I want to do is to center that #fade div on every screen resolution.

How can I accomplish this ?

Answer 1

div that is always centered vertically and horizontally

First, you need to set an actual width for the div. 100% won’t do.
Next, set its position to absolute;

#fade {background:red; width:450px; height:150px; position:absolute;}

Then here’s the updated jQuery:

jQuery.fn.center = function() {
    _TOP = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();
    _TOP = (_TOP <= 0) ? 0 : _TOP;
    _LEFT= (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft();
    _LEFT = (_LEFT <= 0) ? 0 : _LEFT;
    this.css({
        top:_TOP + "px",
        left:_LEFT + "px"
    });
    return this;
}


$("#fade").center();
$(window).on('resize', function() {
    $("#fade").center();
});

$("#fade").hide();
$("button").click(function() {
    
    $("#fade").fadeToggle("slow", "linear").find(".close").on("click", function() {
        $(this).parents("#fade").fadeOut("slow");
        return false;
    });
    
    $("#fade").center();
});​

DEMO