如何在可滚动/非滚动内容中居中加载SVG与文本容器？

问题排查 #

你的代码里，.table-overlay用了绝对定位，但父容器.content没设相对定位，导致它的定位参考可能是整个文档而非目标容器；另外当内容过长时，.table-overlay的高度只取初始视口高度，没法跟着父容器的滚动高度变化，最后就出现加载元素偏移的情况。

修改后代码 #

HTML（结构无需改动）

<div class="content">
    <div class="wrapper">
        <div class="table-overlay">
            <div class="table-overlay-container">
                <div class="">
                    <!-- loading svg and span -->
                    <svg></svg>
                    <span>Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS/SCSS

<style lang="scss" scoped>
.content {
    /* 72px - 顶部导航栏高度 */
    min-height: calc(100vh - 72px);
    padding-bottom: 80px;
    position: relative; /* 加相对定位，让绝对定位的子元素以它为参考 */
}

.wrapper {
    padding-top: 32px;
    padding-bottom: 32px;
    width: 100%;
    min-height: 100%; /* 用min-height代替height，适配内容高度变化 */
}

.table-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    width: 100%;
    min-height: 100%; /* 用min-height确保高度跟着父容器走 */
    overflow-y: auto; /* 内容过长时允许垂直滚动 */

    .table-overlay-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 100%; /* 让容器高度至少填满父元素，保证居中效果不失效 */
        background-color: rgba(255, 255, 255, 0.6);
        padding: 20px; /* 加内边距，避免加载元素贴边 */
    }

    & span {
        user-select: none;
        margin-top: 16px; /* 给文本和SVG加间距，优化视觉 */
    }
}
</style>

核心修改说明 #

• 给.content加position: relative：让.table-overlay的绝对定位范围准确覆盖目标内容区域。
• 替换height: 100%为min-height: 100%：保证容器能随着内容自动增高，不会被固定高度限制。
• 给.table-overlay加overflow-y: auto：内容超出时可以滚动，同时加载元素始终在可视区域的垂直中心。
• 给.table-overlay-container加min-height: 100%：确保flex布局的居中逻辑在容器高度变化时依然生效，内边距则避免加载元素紧贴屏幕边缘。

内容的提问来源于stack exchange，提问作者user19991216