You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.
Thus, provided a <!DOCTYPE html> (standards mode), this should do:
Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.
I found that trick in css-tricks.com/. But when I change the width and height, it's not moving center. Ya, I should change the margin-left and top when change height and width.
That's a quite good article. Maybe you should in the future try to read the article's text as well instead of blindly copypasting only the code .. ;)
Groxx I think you could put scroll bars inside a div in the pop up using the overflow property.
ah. nm if thats the case, i mean of course the browser size will be dynamic, not sure why that was in the question. instead i thought he meant that the popup dimensions needed to be dynamic. thats the case for me so im using transform: translate(-50%, -50%); works great except not on IE8.