html - 基于屏幕而不是页面的 CSS % 垂直居中加载 DIV

Question

假设我的请稍候对话框的 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？

Answer 1

如果您的 .loading ProgressDialog 是基于屏幕尺寸的，您可以使用 position: fixed; 和 viewport units 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;    
}