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

了解宽度和高度，只需添加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 2

如果你不介意在容器元素中包装.web对话框，你可以这样工作：http://dabblet.com/gist/3738494，使用'display：inline-block'，'vertical-alignment'和'text-align：center'。

详细了解我如何将元素集中在一起：http://www.css-tricks.com/centering-in-the-unknown/

Answer 3

试试这个DEMO

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

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

3 个答案: