JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，使得Web开发更加便捷。在网站开发中，经常会遇到需要将对话框或者其他元素居中显示在浏览器屏幕中的情况。使用原生JavaScript来实现这样的功能，会因为不同的浏览器实现有所差异而变得复杂。但是，通过JQuery提供的方法，我们可以很容易地完成这项任务。
为了实现元素居中显示，我们首先需要计算该元素相对于视窗的位置，然后将其移动到计算出的位置。JQuery的代码示例中，通过定义一个名为`center`的方法来实现这一功能，这个方法可以被添加到JQuery的原型上，使得所有选择器选中的元素都可以使用这一方法。
在`center`方法的实现中，首先通过`$(window).height()`和`$(window).width()`函数获取当前浏览器窗口的高度和宽度。接着，通过`this.height()`和`this.width()`获取元素自身高度和宽度。然后计算出居中时元素应该具有的`top`和`left`值。这里的关键是将窗口的尺寸分别减去元素的尺寸，然后除以2，从而得到元素需要在窗口中偏移的位置。
此外，我们还需要考虑浏览器窗口可能被滚动过的情况。因此，代码中还包含了`$(document).scrollTop()`和`$(document).scrollLeft()`的计算，它们分别返回文档在垂直和水平方向上的滚动距离。将之前计算出的居中`top`和`left`值分别加上滚动距离，就可以确保元素在考虑了滚动情况后的正确位置。
使用`this.css()`方法来设置元素的CSS样式，其中包括`position: absolute`（绝对定位），以及计算出的`top`和`left`值。这样设置后，元素的位置就会按照计算结果进行定位。需要注意的是，绝对定位的元素必须具有`position`属性的值为非`static`（默认值），否则`top`和`left`值将不会生效。
实现完定位后，调用`.show()`方法来使元素可见。这样，使用`center`方法的元素就会被定位并显示在浏览器屏幕的中央。
调用示例为`$('#dialog').center();`，这表示选择id为`dialog`的元素，并调用之前定义的`center`方法来将其居中显示。这里`$('#dialog')`是JQuery的选择器，用于选取ID为`dialog`的元素。
需要注意的是，这段代码中的变量`top`和`left`在原代码中错误地写作了小写的`top`和`left`，这应该是一个OCR扫描错误。正确的代码应该是变量名首字母大写，即`top`和`left`。
通过上述方法，我们能够利用JQuery快速实现页面元素的居中显示，大大简化了原本复杂的计算和浏览器兼容性问题。
