中心位置固定元素介绍

有时候我们需要在页面中保持一个元素始终位于页面的中心位置，例如：一个模态框或提示框。在这种情况下，我们需要使用一些技巧来实现这个功能。

CSS技巧

方法1： absolute + translate

我们可以将需要居中的元素设置为 position: absolute，然后使用 transform: translate(-50%, -50%) 将其纵向和横向上各向左/上移动50%的宽度/高度。

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法2： flexbox

我们可以将元素的包含容器设置为 display: flex，然后使用 align-items: center 和 justify-content: center 来使元素在纵向和横向上居中。

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
   /* ... */
}

JavaScript技巧

方法1：屏幕大小监听（纯JS）

我们可以通过监听屏幕大小的变化，来计算元素的位置，再使用 position: fixed 来使其位置固定在屏幕中心。

const el = document.querySelector('.center');
window.addEventListener('resize', () => {
    const { innerWidth, innerHeight } = window;
    const { offsetWidth, offsetHeight } = el;
    el.style.top = `${(innerHeight - offsetHeight) / 2}px`;
    el.style.left = `${(innerWidth - offsetWidth) / 2}px`;
});

方法2：CSS3 calc（纯JS）

我们可以通过计算元素宽度和高度的一半来实现元素居中，在这个过程中，我们使用了 calc() 函数来减去了元素宽度和高度的一半，以保证元素被放置在屏幕中心。

const el = document.querySelector('.center');
const { width, height } = el.getBoundingClientRect();
el.style.position = 'fixed';
el.style.top = `calc(50% - ${height / 2}px)`;
el.style.left = `calc(50% - ${width / 2}px)`;

结论

无论是CSS还是JavaScript技巧，我们都可以很轻松地实现在页面中心位置固定元素。但这些技巧也都在不同的场景下有各自的局限性和适用范围。我们需要根据具体的业务需求和场景来选择最适合的解决方法。