CSS, how to center vertically text inside an overlay in Angular 2 - css

Question

I have an overlay, used to show a spinner (an Angular material component) and a text. This overlay is all over the page and you can't click the elements below.
The spinner is in the middle of the page, and I want the "loading" text to be vertically aligned with the spinner, at the bottom of it-, and of course, to be centered horizzontally.
here are my HTML code and CSS styles:
<div id="overlay" [style.display]="this.showOverlay">
<div id="overlay-spinner">
<mat-spinner [diameter]="80" color="accent"></mat-spinner>
</div>
<div id="overlay-text">
<span>Loading ...</span>
</div>
</div>
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1; /* Specify a stack order in case you're using a different
order for other elements */
cursor: default; /* Add a pointer on hover */
}
#overlay-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#overlay-text {
position: absolute;
top: 65%;
left: 50%;
font-size: 40px;
color: white;
transform: translate(-65%,-50%);
-ms-transform: translate(-65%,-50%);
}
You have not to care about [] attributes inside the tags because those are Angular code. They are used to set spinner properties or to show the entire overlay.
I tried with position absolute, top 65% and left 50% but the spinner and the text are not well aligned. How Can I do ?

Answer 1

I believe your best shot is display:flex on the overlay with it's direction and alignments (see snippet below). On flex you can read more here in this quite comprehensive and great guide. I hope this is what you expected to achieve!
p.s.: I used 'spinner is here' to make sure it is visible
p.s.2.: Do not let your eyes trick you, with the '...' at the end of 'Loading' it is actually centered right below the spinner text
#overlay {
position: fixed;
display: flex;
justify-content:center;
align-items:center;
flex-direction:column;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
cursor: default;
}
#overlay-text {
font-size: 40px;
color: white;
}
<div id="overlay" [style.display]="this.showOverlay">
<div id="overlay-spinner">
<p>spinner is here</p>
</div>
<div id="overlay-text">
<span>Loading ...</span>
</div>
</div>

Answer 2

I would just place your loading text into your overlay-spinner div.
<div id="overlay" [style.display]="this.showOverlay">
<div id="overlay-spinner">
<mat-spinner [diameter]="80" color="accent"></mat-spinner>
<span id="overlay-text">Loading ...</span>
</div>
</div>
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1; /* Specify a stack order in case you're using a different
order for other elements */
cursor: default; /* Add a pointer on hover */
}
#overlay-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#overlay-text {
font-size: 40px;
color: white;
}