Is it possible to center (middle of the screen) the container of loading svg and text within a scrollable content? The content is sometimes is not scrollable. I manage to center it vertically but if the content is too long its not centered.
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;
}
}
</style>
3
Answers
Yes, with
position: fixed
.Switching the position attribute from absolute to fixed would solve it
For HTML like this:
To make the overlay to cover the screen (fixed position relatives to the viewport):
To center any of the element in that, you can do:
or
or