本文介绍一种结合 CSS calc() 与 JavaScript 动态计算的方式，实现对大量绝对定位小方块（如粒子效果）在不同屏幕尺寸下的精准水平垂直居中，并支持窗口缩放实时响应。
本文介绍一种结合 css `calc()` 与 javascript 动态计算的方式，实现对大量绝对定位小方块（如粒子效果）在不同屏幕尺寸下的精准水平垂直居中，并支持窗口缩放实时响应。
在实际开发中，尤其是制作动态粒子、悬浮图标或磁吸式交互效果时，开发者常使用 position: absolute 布局以获得精细控制。但这类布局天然脱离文档流，无法直接通过 text-align: center 或 Flexbox 容器自动居中——尤其当元素数量多、位置硬编码（如原代码中 left: 50px, top: 100px）时，适配响应式屏幕会变得异常困难。
核心思路是：放弃静态坐标，改用相对视口单位（vw/vh）动态计算每个元素的目标中心位置，并通过 window.resize 事件持续同步更新。
✅ 正确做法：动态重置 left 和 top
以下为关键优化逻辑（已整合进完整示例）：
function modify(index, el) {
const $el = $(el);
const total = $('.box').length; // 总元素数（14个）
const halfRow = Math.floor(total / 2); // 每行约7个
if (index < halfRow) {
// 第一行：垂直居中偏上（50vh - 25px），水平按等距分布
$el.css('top', 'calc(50vh - 25px)');
$el.css('left', `calc(50vw - ${halfRow * 25 - index * 50}px)`);
} else {
// 第二行：垂直居中偏下（50vh + 25px）
$el.css('top', 'calc(50vh + 25px)');
$el.css('left', `calc(50vw - ${(total - halfRow) * 25 - (index - halfRow) * 50}px)`);
}
}? 说明：50vw 和 50vh 分别代表视口宽高的一半；25px 是单个 .box 的宽度（50px × 0.5），用于计算行列中心偏移；50px 是相邻元素的横向间距（由原始 CSS 中 left: 50px/100px/150px… 推导得出）。
? 初始化与响应式绑定
确保页面加载和窗口缩放时均触发居中重算：
function init() {
$('.box').each(function(index, el) {
modify(index, el); // 动态设置初始位置
$(el).data("homex", parseInt($(el).css('left')));
$(el).data("homey", parseInt($(el).css('top')));
});
}
// 首次初始化
init();
// 窗口大小变化时重新居中
$(window).on('resize', init);⚠️ 注意事项：
- 避免重复绑定 resize：原答案中使用 window.addEventListener('resize', init) 可能导致多次监听（尤其 jQuery 环境下），推荐统一用 $(window).on('resize', init) 并确保只绑定一次；
- CSS 中移除硬编码 left/top：所有 .box_* 类的 left/top 声明必须删除或注释掉，否则会覆盖 JS 动态计算值；
- 性能优化建议：setInterval(25ms) 频率较高，若页面复杂可考虑改用 requestAnimationFrame 替代；
- 兼容性保障：calc() 在现代浏览器中支持良好（IE9+），无需额外 polyfill。
✅ 最终 HTML 结构精简版（含关键修复）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式居中粒子效果</title>
<style>
.box {
position: absolute; /* 必须保留 */
height: 4px;
width: 4px;
border-radius: 10%;
background: #82eef6;
font-size: 0;
transform: rotate(-2deg);
}
/* 删除所有 .box_1 ~ .box_21 的 left/top 声明！ */
</style>
</head>
<body>
<!-- 所有 box 元素保持原顺序 -->
<div class="box_1 box"></div>
<div class="box_2 box"></div>
<!-- ...其余12个同理... -->
<div class="box_21 box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ✅ 完整 JS 逻辑（含 mouse tracking + dynamic centering）
var mouse = { x: 0, y: 0 };
let forcex = 0, forcey = 0, magnet = 300;
$(document).on('mousemove', e => {
mouse.x = e.pageX;
mouse.y = e.pageY;
});
function init() {
const $boxes = $('.box');
const total = $boxes.length;
const half = Math.floor(total / 2);
$boxes.each(function(i) {
const $el = $(this);
const offset = i < half ? -25 : 25; // ±25px 垂直偏移
const baseX = 50 * (half - 1 - (i % half)); // 水平等距分布
$el.css({
top: `calc(50vh ${offset > 0 ? '+' : ''} ${offset}px)`,
left: `calc(50vw ${baseX > 0 ? '+' : ''} ${baseX}px)`
}).data({
homex: parseFloat($el.css('left')),
homey: parseFloat($el.css('top'))
});
});
}
$(window).on('load resize', init);
$('.box').css('position', 'absolute'); // 显式声明（防 CSS 冲突）
setInterval(() => {
$('.box').each(function() {
const $el = $(this);
const x0 = parseFloat($el.css('left')),
y0 = parseFloat($el.css('top')),
x1 = mouse.x,
y1 = mouse.y;
const dx = x1 - x0, dy = y1 - y0;
const dist = Math.sqrt(dx*dx + dy*dy);
const powerx = x0 - (dx / dist) * magnet / dist;
const powery = y0 - (dy / dist) * magnet / dist;
forcex = (forcex + ($el.data('homex') - x0) / 2) / 2.1;
forcey = (forcey + ($el.data('homey') - y0) / 2) / 2.1;
$el.css({
left: powerx + forcex,
top: powery + forcey
});
});
}, 25);
</script>
</body>
</html>总结：真正实现“任意屏幕居中”，关键不在于寻找万能 CSS 技巧，而在于将布局逻辑从静态样式移交至 JavaScript 动态计算，并利用 vw/vh 提供的视口相对能力。这种方式既保持了绝对定位的灵活性，又赋予其响应式生命力——特别适合粒子动画、导航浮点、交互热区等场景。
