💻前端小技巧：用 JS 实现 div 居中显示 🎯

在网页设计中，让一个 `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` 都能保持在页面中央，就像一颗闪耀的小星星挂在夜空中 🌟。这种方法不仅简单易懂，还能灵活适配各种场景，快来试试吧！💫

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！