Why isn't this vertical align working with bootstrap? - html

Question

I tried expressing my problem earlier in another thread, but the only way that could fix it, caused the website to not be compliant with different size devices. The method I have now tried to use is the vertical center method stated in this topic.
vertical-align with Bootstrap 3
What I'm wanting to happen is to have a full page background along with a horizontally / vertically aligned div tag that contains my name and occupation. But instead what's happened is that it aligns the text to the middle of the page, but then it just doesn't align it vertically.
<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
<h1>name</h1>
<h2>occupation</h2>
<h3>location</h3>
</header>
</div>
CSS
header {
/*position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-family: Roboto-thin ;
padding: 0px;
border-style: none;
color:#ffffff ;
}
header h1 {
font-family:;
font-size: 8rem; /* =28px */
letter-spacing: 0.05em;
padding: 0px ;
margin-top: 0px;
margin-bottom: 13px;
}
header h2 {
font-family: ;
font-size: 5rem;
padding: 0px;
margin: 0px;
}
header h3 {
font-family: ;
font-size: 3rem;
}
.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
The old method I used can be found in the header tag commented out. This method works fine for some browsers, but it seems that most browsers don't support the transform function.
Thanks in advance.

Answer 1

Bootstrap typically uses percentages for cross-platform/cross-browser capabilities. Maybe you could try adding something like this to your css file (alongside your .vcenter class):
.vcenter::before {
content:'';
display:inline-block;
height: 100%;
vertical-align:middle;
width:0px;
}
This will retrieve the height of the screen based on percentages and format the text vertically before it is displayed, which in theory, should work on all devices and browsers(for the most part). In IE8 you've got to use :before instead of ::before and have a !DOCTYPE declared. Hope this helps!