使用jQuery实现div居中显示的技巧

"这篇文章主要介绍了如何使用jQuery实现一个div元素悬浮在页面中央的效果。通过创建一个自定义的jQuery方法center()，将div的定位设置为fixed，并计算出居中的top和left值，使得div始终保持在窗口中心。同时，当窗口大小发生变化时，会自动调整div的位置，以保持其在视口中央。示例代码分为两部分，第一部分是基本的悬浮中央实现，第二部分考虑了窗口大小变化的情况。" 在网页开发中，有时候我们需要让某个div元素始终悬浮在页面的中央位置，无论用户滚动页面或改变浏览器窗口大小。jQuery提供了一个简单的方式来实现这一效果。本文以一个id为"checkBookingInfo"的div为例，讲解如何用jQuery来实现这个功能。 首先，我们需要创建一个自定义的jQuery扩展方法`center()`，这个方法将会处理div的定位。代码如下： ```javascript jQuery.fn.center = function() { this.css("position", "fixed"); this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); return this; }; ``` 这段代码中，`this.css()`用于设置样式，`position: fixed`确保div相对于浏览器窗口定位。然后通过计算窗口高度和宽度与div自身高度和宽度的差值的一半，加上窗口的滚动偏移量，使得div的垂直和水平位置居中。 为了让div在窗口大小变化时仍然保持在中央，我们需要监听窗口的`resize`事件： ```javascript $(window).on('resize', function() { if ($("#checkBookingInfo").is(":visible")) { $("#checkBookingInfo").center(); $("#checkBookingInfo").show(); } }); ``` 当窗口尺寸发生变化时，检查div是否可见，如果可见则调用`center()`方法重新计算并设置div的位置。 最后，显示div并应用`center()`方法： ```javascript $("#checkBookingInfo").center(); $("#checkBookingInfo").show(); ``` 这样，id为"checkBookingInfo"的div就能始终悬浮在页面中央了。 总结一下，通过使用jQuery，我们可以轻松地实现div元素的悬浮中央效果，关键在于设置div的固定定位和根据窗口尺寸动态调整其top和left值。同时，结合窗口的resize事件监听，可以确保在窗口大小变化时div的中央位置不会受到影响。这是一个实用的技巧，可以在多种场景下提高用户体验，比如弹窗提示、信息提示框等。