Display inline-block (vertical center) not working - bootstrap - html

Question

I am using bootstrap to create a layout however, I can't seem to understand why display:inline-block with vertical-align: middle isn't working.
I would prefer not to use position absolute.
JSFiddle: https://jsfiddle.net/yheep9hh/
Any help would be appreciated
HTML:
Currently using bootstrap to create the layout (navbar, etc)
<header>
<nav class="navbar navbar-transparent">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">hello</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/Home">Home</a></li>
<li>Website Design</li>
<li>Tech Support</li>
<li>Data Security</li>
<li>Networking</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid wrapper bgImage">
<div class="indexWelcome">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Welcome To Amparo Tech</h1>
<h3 class="text-center">How Can We Help You?</h3></div>
</div>
<div class="row input-fixedWidth">
<div class="col-md-12">
<form class="homeForm" method="POST">
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<input class="homeFormEmail" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<input class="homeFormPostcode" type="text" name="postcode" placeholder="Postcode">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-push-2 col-md-8">
<textarea class="homeFormMessage" name="message" placeholder="Your Message or Tech Issue"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-4 text-left pull-left">
<p>name</p>
</div>
<div class="col-md-4 text-right pull-right">
<p>number</p>
</div>
<div class="col-md-4 text-center">
<p>address</p>
</div>
</div>
</div>
</footer>
CSS:
Custom CSS
* {
box-sizing: border-box;
}
html,
body {
height:100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin:0 auto;
margin-bottom: 10px;
}
.wrapper {
min-height:calc(100% - 82px);
margin: 0 auto -10px;
}
.footer, .push {
height: 10px;
}
.navbar {
margin:0;
height:52px;
}
input, textarea {
width: 100%;
margin:0 auto;
}
.input-fixedWidth {
max-width:750px;
margin: 0 auto;
}
.formWrapper {
position:relative;
}
.indexWelcome {
display:inline-block;
vertical-align:middle;
width: 100%;
text-align:center;
}
.navbar-transparent {
background-color: transparent;
}
.homeFormEmail {
margin-top: 20px;
}
.homeFormEmail,
.homeFormPostcode,
.homeFormMessage {
text-indent: 10px;
margin-bottom: 15px;
font-size:14px;
}
.homeFormEmail,
.homeFormPostcode {
height:40px;
}
.homeFormMessage {
height: 80px;
padding-top:10px;
resize: vertical;
}

Answer 1

Vertical-align:middle; works well with display:table-cell; that is if the parent div is display:table;

Answer 2

To display a <div> block vertically aligned in the middle, you need to use display table and table-cell to the parent and child respectively.
Have a look at the updated Fiddle (jsFiddle)
Just like:
/* Parent */
.wrapper {
display: table;
}
/* Child */
.indexWelcome {
display: table-cell;
}
Hope this helps!

Answer 3

since css flexbox is supported almost everywhere these days i would use it, since it makes vertical alignment very easy:
.wrapper {
display:flex;
align-items:center;
justify-content:center;
}
demo: https://jsfiddle.net/7totjt2p/2/