使用最大宽度和最小宽度水平居中放置JQuery弹出窗口

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

Knowing the width and height, just add margin-left: -width/2 and margin-top: -height/2 . But since you do not know the value, you first need to capture it and then apply the CSS rule:

$(function(){
  $dialog = $(".web_dialog");
  var w = $dialog.width();
  var h = $dialog.height();

  $dialog.css({'margin-left' : -w/2, 'margin-top' : -h/2});
});​

Demo: http://jsfiddle.net/kenPN/

Answer 2

If you don't mind wrapping the .web-dialogue box in a container element, you can get it to work this way: http://dabblet.com/gist/3738494 , using 'display: inline-block', 'vertical-alignment' and 'text-align: center'.

Read more on how I centered the element: http://www.css-tricks.com/centering-in-the-unknown/

Answer 3

try this DEMO

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