如何将元素放置在特定位置

Question

我正在使用JavaScript引导程序进度条。以下两种方法用于显示和隐藏进度：

function showProgress() {
    let oldProgress = document.getElementById('temporaryProgressBar');
    if (oldProgress) {
        oldProgress.style.visibility = 'visible';
    } else {
        let progress = document.createElement('div');
        progress.id = 'temporaryProgressBar';
        progress.classList.add('progress');
        let innerProgress = document.createElement('div');
        innerProgress.classList.add('progress-bar', 'progress-bar-striped', 'progress-bar-animated');
        innerProgress.style.width = "100%";
        progress.appendChild(innerProgress);
        document.body.children[parseInt(document.body.children.length / 2)].insertAdjacentElement('beforebegin', progress);
    }
}

function hideProgress() {
    let progress = document.getElementById('temporaryProgressBar');
    if (progress) {
        progress.style.visibility = 'hidden';
    }
}

当前，我将进度插入到页面的中心，几乎在第n/2个body子之前。我将其插入到中心以确保用户看到进度条。但是，它并不总是有效。假设我们有一个孩子（如网格），其中有许多孩子。因此，您不能确保进度条显示在视口的中心。因此，我想知道是否还有一种更防弹的方法可以将元素置于页面中心。
无论页面已经滚动多少，是否都可以将元素放置在地址栏下方视口的顶部？如果是这样，这将使进度条在可见窗口的顶部可见。