在前端开发中，我们经常需要对不同尺寸的网页元素进行居中显示。jQuery是一个广泛使用的JavaScript库，它提供了方便的API和插件，可以简化这个任务的实现。
实现思路
要实现动态居中显示，我们需要考虑以下几个因素：
- 元素本身的尺寸和位置
- 它的父容器的尺寸和位置
- 屏幕的尺寸和位置
基于这些因素，我们可以采用如下的方法来实现动态居中显示：
- 计算元素的位置：将元素的左上角坐标设置为其父容器左上角坐标加上父容器宽度和高度的一半再减去元素自身宽度和高度的一半。
- 监听窗口变化事件：当浏览器窗口大小发生变化时，重新计算元素的位置，并将其移动到新的位置。
- 初始化元素位置：在页面加载完成后，调用一次计算元素位置的函数，以确保元素最初就处于正确的位置上。
插件代码
基于以上思路，我们可以编写一个jQuery插件来实现动态居中显示。下面是完整的插件代码：
-- -------------------- ---- -------
----------- - -------- -- -
--- ----- - --------
--- ------- - ---------------
--- - - --------------------- - ------------------- - - - ---------------------
--- - - ---------------------- - -------------------- - - - --------------------
-------------------- ----------- ----- -- ---- ----
--
------------------------- -- -
-----------------------
---
-------------------------- -- -
-----------------------
---在这段代码中，我们定义了一个名为center的jQuery插件。它将元素居中显示，并在窗口大小变化时自动更新元素位置。
要使用这个插件，您可以在HTML中引入jQuery库和上述代码，然后在需要居中显示元素的地方调用$('selector').center()方法，其中selector是您要居中显示的元素选择器。
示例
下面是一个具体的示例，展示如何使用上述插件来实现动态居中显示。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- --------- ---- --------------
------- -----------------------------------------------------------
------- --------------------------------
-------
---------- -
--------- ---------
------ ----
------- ------
------- - -----
------- --- ----- ------
-
---- -
------ ------
------- ------
----------------- ----
-
--------
-------
------
---- ---------------
---- ---------------
------
--------
-------------------------- -- -
-------------------
---
---------
-------
-------在这个示例中，我们创建了一个父容器#container，并在其中放置了一个需要居中显示的子元素#box。我们给父容器设置了宽度、高度和边框，而子元素只设置了宽度、高度和背景颜色。
在JavaScript代码中，我们使用插件方法$('#box').center()来居中显示子元素。在文档加载完成时，该方法会被自动调用一次，以确保子元素最初就处于正确的位置上。
结论
使用jQuery插件可以快速、方便地实现
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2467