Question

what i have seen so far, is that centering a popup horizontally and vertically is with set widths, ie:

width:200px; 
height:200px;
left:50%;
top: 50%;
position:fixed;

but I am trying to add max and min widths to the popup because I have some that are wider and some that are shorter but I want to control the width to not pass a certain width.

.web_dialog
{
display: none;
position: fixed;
min-width: 360px;
min-height: 180px;
max-width: 880px;
max-height: 480px;
top: 50%;
left: 50%;
background-color: #ffffff;
padding:10px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
z-index:1001;
border:1px solid rgba(0, 0, 0, .333); 
}

now when I do this yes the popup grows but to the right so it makes it seem like its uncentered. Any help clearing this up for me I would really appreciate it. I just went through deleting all my ajax toolkit popups to replace for this simple jquery one and I hope to make it work cause there were alot of pages I had to change.. :S

Answer 1

try this DEMO

Source Code
http://jsbin.com/ejijoj/2/edit