在网页设计中，让一个 `div` 元素居中显示是一个常见的需求，尤其是在响应式布局中。今天就来分享如何通过 JavaScript 轻松搞定这个任务！✨

首先，我们需要明确目标：无论是水平居中还是垂直居中，抑或是两者兼得，都可以通过 JS 动态计算实现。比如，以下代码可以将一个 `div` 元素固定在页面中央：

```javascript

// 获取需要居中的 div 元素

const div = document.querySelector('center-me');

// 设置居中逻辑

function centerDiv() {

const parentWidth = div.parentNode.offsetWidth;

const parentHeight = div.parentNode.offsetHeight;

const divWidth = div.offsetWidth;

const divHeight = div.offsetHeight;

// 水平与垂直居中公式

div.style.position = 'absolute';

div.style.left = `${(parentWidth - divWidth) / 2}px`;

div.style.top = `${(parentHeight - divHeight) / 2}px`;

}

// 页面加载完成后调用函数

window.addEventListener('load', centerDiv);

```

通过这段代码，无论屏幕大小如何变化，`div` 都能保持在页面中央，就像一颗闪耀的小星星挂在夜空中 🌟。这种方法不仅简单易懂，还能灵活适配各种场景，快来试试吧！💫