css/ jQuery - 中心绝对定位 div

Question

The div is 50% opaque and is displayed on top of the site's content, and it has a fixed width of 960 pixels (it's created by jQuery).

How can I center it horizontally?

margin: 0 auto; doesn't work:(

Answer 1

margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...

http://jsfiddle.net/UnsungHero97/HnzyT/2/

To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:

width: 960px;
position: absolute;

/* ... other CSS properties... */

left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */

If you want to center it both vertically and horizontally, you need to know how wide AND how tall the element is.

I hope this helps.
Hristo

Answer 2

Just subtract the window midpoint from half the width of you element on resize. Here's a simple plugin that you could easily accomodate to center vertically if need be as well:

$.fn.centerMe = function () {
    this.css('left', $(window).width()/2 - $(this).width()/2);
};

$(window).resize(function() { $('#yourElem').centerMe(); });

$('#yourElem').centerMe();

See working example →