Question

我刚刚继承了一些代码，部分代码就是显示一个浮动div并将其居中。

以下是代码：

function showFloatingDialog(element) {
  removeMessage();
  var height, width;
  var offsetY = $(document).scrollTop();

  if (offsetY == undefined) {
    offsetY = 0;
  }

  var dialog = $('#' + element);

  dialog.show();

  height = (($(window).width() - dialog.width()) / 2);
  width = ($(window).height() - dialog.height()) / 2;
  width = width + offsetY;

  height = height - 195;
  width = width - 130;

  dialog.css('position', 'absolute');
  dialog.css('left', height + 'px');
  dialog.css('top', width + 'px');
}

在它的辩护中，它运作得很好，但我以下几行看起来像黑客：

  width = width + offsetY;

  height = height - 195;
  width = width - 130;

是否有更好，更简洁的方法来获得相同的结果。

Answer 1

这个问题似乎有很多代码可以做我认为相对简单的事情。实例：http://jsfiddle.net/LHSDU/1/

var width = ($(window).width() - dialog.width()) / 2;
var height = ($(window).height() - dialog.height()) / 2;

dialog.css({'position' : 'absolute' , 'left' : width + 'px', 'top' : height + 'px'});

Answer 2

有许多方法可以使浮动div居中，你给出的例子也许不是最好的方法，但它类似于你在纯css中做到这一点的方法之一。

这是一个很好的链接，有更多的信息。 http://blog.themeforest.net/tutorials/vertical-centering-with-css/

使用

margin-left:auto;
margin-right:auto;

将水平居中设置

Answer 3

我想这些减法是将元素的宽度和高度的一半放在中心。为了使这个动态，您只需要将其替换为要定位的元素的宽度和高度的一半的值。

height = (($(window).width() - (dialog.width() / 2)) / 2);
width = ($(window).height() - (dialog.height() / 2)) / 2;

然后你不需要从整体高度和宽度中减去任何东西。

使用jQuery使浮动div居中

3 个答案: