jQuery实现的浮动层div浏览器居中显示效果

要实现一个浮动层div在浏览器居中显示，可以使用下面的步骤：

要实现一个浮动层div在浏览器居中显示，可以使用下面的步骤：

1. 设置浮动层div的样式

首先需要定义一个浮动层div的样式，设置它的宽度、高度、颜色、边框等属性，并让它在页面中以绝对定位的方式浮动。

#float-layer {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
}

2. 使用jQuery计算浮动层div的位置

接下来需要使用jQuery计算浮动层div的位置，以使它居中显示在浏览器中。首先可以通过$()方法获取浮动层div的jQuery对象，然后获取浏览器的宽度和高度，最后设置浮动层div的left和top属性。

$(function () {
  var $floatLayer = $('#float-layer');
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var floatWidth = $floatLayer.width();
  var floatHeight = $floatLayer.height();
  var top = (windowHeight - floatHeight) / 2 + $(document).scrollTop();
  var left = (windowWidth - floatWidth) / 2;
  $floatLayer.css({top: top, left: left});
});

在上面的代码中，使用$(function () {})是为了在页面加载完成后自动执行这段代码，获取浮动层div的jQuery对象后，使用.width()和.height()方法获取它的宽度和高度，获取浏览器窗口的宽度和高度，然后计算出浮动层div左侧和顶部的位置，最后使用.css()方法设置它的left和top属性。

示例1：简单的浮动层div居中显示

下面是一个简单的浮动层div居中显示的示例，HTML代码如下：

<div id="float-layer">这是一个浮动层div</div>

CSS代码如下：

#float-layer {
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
}

使用jQuery计算浮动层div的位置：

$(function () {
  var $floatLayer = $('#float-layer');
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var floatWidth = $floatLayer.width();
  var floatHeight = $floatLayer.height();
  var top = (windowHeight - floatHeight) / 2 + $(document).scrollTop();
  var left = (windowWidth - floatWidth) / 2;
  $floatLayer.css({top: top, left: left});
});

示例2：带遮罩的浮动层div居中显示

如果需要在浮动层div上方加一个遮罩，可以在HTML代码中添加一个遮罩层。同时，可以给遮罩层和浮动层div添加类名，避免ID选择器对页面性能的影响。

<div class="mask"></div>
<div class="float-layer">这是一个浮动层div</div>

CSS代码如下：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.6;
  z-index: 999;
}

.float-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
}

在上面的CSS代码中，遮罩层使用绝对定位，并设置它的opacity属性，以达到半透明的效果，同时设置它的z-index属性，以使它显示在浮动层div的下方。浮动层div使用绝对定位，并利用CSS3的transform属性使它在水平和垂直方向上都居中显示，设置它的z-index属性使它显示在遮罩层的上方。

使用jQuery计算浮动层div的位置：

$(function () {
  var $floatLayer = $('.float-layer');
  var windowHeight = $(window).height();
  var floatHeight = $floatLayer.height();
  var top = (windowHeight - floatHeight) / 2 + $(document).scrollTop();
  $floatLayer.css({top: top});
});

在上面的代码中，由于使用了CSS3的transform属性，因此只需要计算浮动层div顶部的位置即可。

以上就是实现一个浮动层div在浏览器居中显示的完整攻略，希望对您有所帮助。