将 JQuery 弹出窗口水平居中，最大宽度和最小宽度

Question

到目前为止

，我所看到的是，水平和垂直地将弹出窗口居中是具有设定宽度的，即：

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

但我正在尝试向弹出窗口添加最大和最小宽度，因为我有一些更宽，有些更短，但我想控制宽度以不传递某个宽度。

.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); 
}

现在，当我这样做时，是的，弹出窗口会增长，但向右移动，因此它看起来像是没有居中。 任何帮助为我解决这个问题，我将不胜感激。 我刚刚删除了我所有的 ajax 工具包弹出窗口来替换这个简单的 jquery 弹出窗口，我希望它能够正常工作，因为我必须更改很多页面。：S

Answer 1

试试这个演示

源代码http://jsbin.com/ejijoj/2/edit

Answer 2

知道宽度和高度，只需添加margin-left: -width/2和margin-top: -height/2即可。但是由于您不知道该值，因此首先需要捕获它，然后应用 CSS 规则：

$(function(){
  $dialog = $(".web_dialog");
  var w = $dialog.width();
  var h = $dialog.height();
  $dialog.css({'margin-left' : -w/2, 'margin-top' : -h/2});
});​

演示：http://jsfiddle.net/kenPN/

Answer 3

如果你不介意将.web-对话框包装在容器元素中，你可以让它这样工作：http://dabblet.com/gist/3738494，使用"显示：内联块"，"垂直对齐"和"文本对齐：中心"。

阅读更多关于我如何将元素居中的信息：http://www.css-tricks.com/centering-in-the-unknown/