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

到目前为止，我所看到的是，将弹出窗口水平和垂直居中是设置宽度的，即：

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

知道宽度和高度，只需添加

左边距：-宽度/2

和

右边距顶部：-高度/2

。但由于您不知道该值，因此首先需要捕获该值，然后应用CSS规则：

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

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

---

演示：

知道宽度和高度，只需添加

左边距：-宽度/2

和

右边距顶部：-高度/2

。但由于您不知道该值，因此首先需要捕获该值，然后应用CSS规则：

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

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

---

演示：

如果您不介意将.web对话框包装在容器元素中，可以通过以下方式使其工作：，使用“显示：内联块”、“垂直对齐”和“文本对齐：中心”

---

阅读有关如何将元素居中的详细信息：

如果您不介意将.web对话框包装在容器元素中，可以通过以下方式使其工作：，使用“显示：内联块”、“垂直对齐”和“文本对齐：中心”

阅读更多有关如何将元素居中的信息：

试试这个

源代码 试试这个

源代码

---

您想要纯css解决方案还是jQuary解决方案？我不知道jQuary，但JQuery可以；）谢谢你想要纯css的解决方案还是jQuary就可以了？我不知道jQuary，但JQuery可以；）谢谢我试过了，但看一看：你的宽度和高度设置为200px，而不是仅使用最小和最大宽度和高度，当我进行设置时，它将弹出窗口移出中心。我试过了，但看一看：你的宽度和高度设置为200px，而不是仅使用最小和最大宽度和高度，当我进行放样时，它将弹出窗口移出了居中位置。这样做有效，只是容器阻塞了页面上的控件。我不能点击任何东西，除非我删除位置：fixedI建议在容器上使用“指针事件：无”，在弹出窗口上使用“自动”，但支持不足：/n除了容器阻止页面上的控件外，这是有效的。除非删除位置，否则我无法单击任何内容：fixedI建议在容器上使用“指针事件：无”，在弹出窗口上使用“自动”，但支持效果不太好：/这看起来不错，但它看起来并不是真正水平居中，当我将大量文本放入其中只是为了尝试，它在左边比右边留下更多的空间。我用Tweek键弹出css，取出最小值，不知怎么的，它开始工作了。谢谢这看起来还可以，但它看起来并不是水平居中的，当我把很多文本放进去尝试时，它在左边留下的空间比右边多。我在弹出的css上敲了一下，取出了最小值，不知怎么的，它开始工作了。谢谢