Is it possible to center (in the middle of the screen) the svg and text loading container within a scrollable content? Sometimes the content cannot be scrolled. I can center it vertically but if the content is too long it doesn't center.

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 - height of top navigation bar */
 min-height: calc(100vh - 72px);
 padding-bottom: 80px;
}

.wrapper {
 padding-top: 32px;
 padding-bottom: 32px;
 width: 100%;
 height: 100%;
}

.table-overlay {
 position: absolute;
 inset: 0;
 z-index: 1000;
 width: 100%;
 height: 100%;

 .table-overlay-container {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 height: 100%;
 // margin-right: 20px;
 background-color: rgba(255, 255, 255, 0.6);
 }

 & span {
 user-select: none;
 }
}