使用最大宽度和最小宽度水平居中 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

试试这个DEMO

源代码 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-dialogue 包装在容器元素中，您可以通过以下方式使其工作：http://dabblet.com/gist/3738494，使用 'display: inline-block'、'vertical-alignment' 和 '文本对齐：居中'。

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