Trouble Vertically Aligning Text to Middle of Window/Viewport - css

Question

I'm trying to align some text to the bottom of a loading sequence & I think the best way to get part way there is to use vertical-align. The trouble is that is not working.
I have a replica of the code here.
HTML:
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
CSS:
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
I have done extensive research on the matter. From what I can tell it should be working. However, I am using a pseudo element to insert my text & I haven't been able to find much documentation on vertical-align & pseudo in these particular types of cases.
I found this article very useful: Vertical-Align: All You Need To Know
I would like to know why vertical-align is not working. I am also open to better methods of how to place my text below my loading sequence responsively. I am aware of calc(), it is what I am currently using.
CSS:
#bg_loader:before {
content: "Thank You for Waiting";
display: inline-block;
position: absolute;
bottom: calc(60% - 14em);
width: 100%;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Update:
I made some edits to Pangloss's code (marked answer below) to make the coded a little more dynamic:
jsfiddle
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
height: 13.86em;
line-height: calc(100% + (13.86em * 2) + 1.575em);
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Basically, instead of giving the :after element a fixed padding of icky pixels, I gave it a the same height as the image (in beautiful flowy em values) & a line-height calculated to bring the text to the bottom with a bit of padding.
Now, obviously, this is still going to need some work as this won't be compatible with firefox (Firefox does not support calc() inside the line-height.... I have also noticed issues in iPad. I am currently working to diagnose the issue.
I shall try to keep this post updated. (My progress will be tracked here.)

Answer 1

If you set vertical-align on a inline block element, it actually valign the element itself, rather the content inside, and that element is 100% height, so nothing happens, that is main issue there.
Secondly, the valign position is actually relative to the sibling elements' heights (usually the tallest one). And you there isn't any siblings in your example. The guide you have followed is very good, you can read it again, but more carefully.
Updated code snippet:
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px; /*spacing*/
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
Full working example:
jsfiddle
html{
height: 100%;
min-height: 100%;
overflow-y: scroll;
}
body{
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background-color: #F1FAFC;
background-attachment: fixed;
font-size: 80%;
margin: 0;
}
#bg_loader {
width: 100%;
height: 100%;
z-index: 100000000;
background-image: url(../images/loading/myhhub_loading.gif);
background-repeat: no-repeat;
background-position: center;
}
#bg_loader:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#bg_loader:after {
content: "Thank You for Waiting";
display: inline-block;
vertical-align: middle;
width: 100%;
padding-top: 270px;
text-align: center;
font-size: 140%;
font-weight: bold;
color: #080;
}
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>

Answer 2

using a relative and absolute relationship for parent and pseudo elements is known to give you more control over positioning. I added:
#bg_loader {
position: relative;
}
#bg_loader:before{
text-align: center;
position: absolute;
top: calc(50% + 120px);
}
using calc() is the best way to maintain pos. control in my experience,
and using text-align for simplicity sake. this will also 'flex' well in the mobile realm.
check the updated fiddle
and some lite reading