Html 基于屏幕而非页面，使用CSS%垂直居中加载DIV

假设我的“请等待”对话框的CSS为

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60%;
    left: 40%;
    position: absolute;
    z-index: 9999999999;
    background-color: white;    
}

当我在笔记本电脑的页面底部显示它时，DIV在顶部是看不见的。定位取决于我的滚动距离，而不是当前可见部分大小的固定60%。有没有一种简单的方法可以根据当前屏幕大小而不必求助于JS hackery？

如果.LoadingProgress对话框基于屏幕大小，则可以使用position:fixed；与vh和vw一起

.loadingProgressDialog {
    width: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    top: 60vh;
    left: 40vw;
    position: fixed;
    z-index: 9999999999;
    background-color: white;    
}