How to stack centered divs vertically - html

Question

I can't seem to figure out a way to stack my divs vertically while still aligning them in the center of the page.
This is my current html:
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.loading-page .image-container {
position: relative;
display: inline-block;
}
.loading-page .image-container .image-grey {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(1);
}
.loading-page .image-container:after {
position: absolute;
content: "";
top: 0;
left: 0%;
width: var(--image-load);
height: 100%;
background-position: top left;
}
.counter {
text-align: center;
position: relative;
width: 200px;
}
.counter h1 {
color: black;
font-size: 60px;
font-weight: bold;
margin-top: -10px;
margin-bottom: -10px;
}
.counter hr {
background: #000000;
border: none;
height: 1px;
}
<div class="loading-page">
<div class="image-container" style="--image-load: 50%;">
<style>
.image-container:after {
background-image: url(http://i.imgur.com/bZt9ZwE.png);
}
</style>
<img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png" />
</div>
<div class="counter">
<h1>50%</h1>
<hr/>
</div>
</div>
A working example:
JsFiddle
The target is for the "50%" text to be below the image while both divs are centered, both vertically and horizontally. Image size is going to be dynamic thus I can't just set everything with fixed width/height and play with paddings.

Answer 1

Set flex-direction:column; to .loading-page
body{
margin:0px;
}
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading-page .image-container {
position: relative;
display: inline-block;
}
.loading-page .image-container .image-grey {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(1);
}
.loading-page .image-container:after {
position: absolute;
content: "";
top: 0;
left: 0%;
width: var(--image-load);
height: 100%;
background-position: top left;
}
.counter {
text-align: center;
position: relative;
width: 200px;
}
.counter h1 {
color: black;
font-size: 60px;
font-weight: bold;
margin-top: -10px;
margin-bottom: -10px;
}
.counter hr {
background: #000000;
border: none;
height: 1px;
}
<div class="loading-page">
<div class="image-container" style="--image-load: 50%;">
<style>
.image-container:after {
background-image: url(http://i.imgur.com/bZt9ZwE.png);
}
</style>
<img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png" />
</div>
<div class="counter">
<h1>50%</h1>
<hr/>
</div>
</div>

Answer 2

Here you go!
Tip: don't use pixels(px), they can't be responsive... instead, use percentage as a unit of measurement to make it responsive.
EDIT: I Updated my answer... now it's responsive. Hope it helps!
.loading-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading-page .image-container {
position: relative;
display: inline-block;
}
.loading-page .image-container .image-grey {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(1);
}
.loading-page .image-container:after {
position: absolute;
content: "";
top: 0;
left: 0%;
width: var(--image-load);
height: 100%;
background-position: top left;
}
.counter {
text-align: center;
position: static;
width: 200px;
}
.counter h1 {
color: black;
font-size: 60px;
font-weight: bold;
margin-top: 5%;
margin-bottom: -5%;
}
.counter hr {
background: #000000;
border: none;
height: 1px;
}
<div class="loading-page">
<div class="image-container"
style="--image-load: 50%;">
<style>.image-container:after { background-image: url(http://i.imgur.com/bZt9ZwE.png);}</style>
<img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png"/>
</div>
<div class="counter">
<h1>50%</h1>
<hr/>
</div>
</div>