I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at
http://www.bootply.com/C8vhHTifcE
All of my attempts at centering have been unsuccessful. Does anyone have a solution?
Just to clarify: I want the container to be centered vertically in the viewport and also want to space out the rows to fill the space.
HTML
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
A HEADING
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
AN ITEM
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
ANOTHER ITEM
</div>
</div>
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
<input value="A BUTTON" style="width:100px;" type="button">
</div>
</div>
<!-- /.row -->
</div>