Question

我的网站上有一个弹出式联系表单，几乎居中，但右侧有点太高，有点太多。

这是它的CSS：

#fg_formContainer
{
   height:410px;
   width:545px;
   background:#FFFFFF;
   border:1px solid #000;
   padding:0;
   position:absolute;
   z-index:999;
   cursor:default;   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
display:none;
}

您可以访问envisionlocal [dot] com并单击“Get In Touch”文本以查看弹出窗体。提前谢谢！

Answer 1

您目前有：

display: block;
top: 174px;
left: 519px;

要使其居中，请将左侧更改为50％并设置左侧边距为负1/2，即容器宽度（545像素）

所以，

display: block;
top: 174px;
left: 50%;
margin-left:-272px;

Answer 2

您正在使用绝对定位并将特定像素值设置为top:和left:属性。将这些值居中应为50％。这会产生问题，因为属性top:和left:分别是从应用它们的元素的上边缘和左边缘计算出来的。要将元素“伪造”为从其中心计算50％，只需添加margin-top:和margin-left:，分别等于元素宽度和高度的一半。

将以下规则添加到水平和垂直中心。

display: block;
top: 50%;
left: 50%;
margin-left: -272px;
margin-top: -205px;

修改

参考下面的评论，以及评论与我相似的其他人的答案。您的一些样式正在内联应用。

您的容器div：<div id="fg_formContainer" style="display: block; top: 201px; left: 645px; margin-left: -272px; margin-top: -205px;">

如果您将top:和left:值更改为50％，我的修复程序将适合您。

此外......这些样式应该应用于您在上面发布的CSS块。它们不应该首先应用于内联。

Answer 3

在JS文件http://www.envisionlocal.com/scripts/fg_moveable_popup.js中，您需要使用对象的实际宽度和高度更新函数的宽度和高度。

这段代码：

var pt = window.center（{ 宽度：390，身高：480 }）;

应该是：

var pt = window.center（{ 宽度：410，身高：545 }）;

我相信应该这样做。您的js函数fg_popup_form正在为您处理中心。它运行这个名为window.center（）的函数，它以弹出窗口为中心。但是，如果您没有输入弹出元素的正确宽度和高度，它将无法正确定位。

是的，您可以通过CSS以不同方式执行此操作，但您的JS已经到位以实现此目的。

Answer 4

昨天我为朋友做了这个。这可能会对你有所帮助。

Demo

HTML：

<div id="fblightbox">
  <div class="fblightbox-wrap">
    <div class="fblightbox-header">
      <h3>This header is just awesome xD</h3>
    </div>
    <div class="fblightbox-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="fblightbox-footer">
      <a href="#" class="fbbutton">Continue</a>
      <a href="#" id="close" class="fbbutton">Close</a>
    </div>
  </div>
</div>
<div class="overlay"></div>

<div class="demo">
  <a id="launch" class="fbbutton" href="#">Launch Popup</a>
</div>

CSS：

*{
  margin:0;
  padding:0;
}
#fblightbox{
  background: rgba(82, 82, 82, .7);
  color: #333;
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  border-radius: 8px;
  padding:10px;
  width: 575px;
  position: fixed;
  left:50%;
  top:50%;
  z-index: 99999;
  display:none;
}
.fblightbox-wrap{
  border: 1px solid #3B5998;
}
.fblightbox-header{
  background:#6C83B8;
  border-bottom: 1px solid #29447E;
  color: #fff;
  font-size: 14px;
  padding:5px;
}
.fblightbox-header h3{
  font-size:14px;
}
.fblightbox-content{
  background:#fff;
  font-size: 12px;
  padding:10px;
}
.fblightbox-footer{
  background: #f2f2f2;
  border-top: 1px solid #ccc;
  color: #333;
  padding: 10px;
  text-align:right;
}
.fbbutton{
  text-decoration:none;
  color:#fff;
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 13px;
  border-style: solid;
  background-image: url(http://i.imgur.com/tu8qPWG.png);
  cursor: pointer;
  font-weight: bold;
  padding: 4px 8px 4px 8px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  border-width: 1px;
  margin-left: 3px;
  background-position: 125px 235px;
  border-color: #29447E #29447E #1A356E;
  line-height: normal !important;
  display: inline-block;
}
.overlay{
  background: rgba(0,0,0,0.2);
  position:fixed;
  width:100%;
  height: 100%;
  z-index: 99;
  display:none;
}

.demo{
  padding:30px 50px;
}

JS：

var fblightbox = $('#fblightbox');
fblightbox.css({'margin-left':'-'+(fblightbox.width()/2)+'px','margin-top':'-'+(fblightbox.height()/2)+'px'});

$("#launch").click(function() {
  $('.overlay').fadeIn();
  fblightbox.fadeIn();
});
$("#close").click(function() {
  $('.overlay').fadeOut();
  fblightbox.fadeOut();
});

Answer 5

使用jQuery，你可以做到：

jQuery.fn.centerThat = function () {
    this.css('position','absolute');
    this.css('top', Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
        $(window).scrollTop()) + 'px');
    this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
        $(window).scrollLeft()) + 'px');
    return this;
};

现在您可以使用此功能将窗口中的任何元素居中，如下所示：

$('#fg_formContainer').centerThat();

Answer 6

将vertical-align: middle添加到垂直居中，margin-left:auto, margin-right:auto添加到水平居中

vertical-align: middle;
margin-left:auto; 
margin-right:auto;

如何以弹出窗体为中心？

6 个答案: