title: Vertically Centering Text in Jumbotron - Height won't inheirit
body: <p>I want the text in the <code>.jumbotron</code> div to be pushed down half way between the div, instead of hovering towards the top. I am opting to use <code>padding-top: 50%</code>. Instead, it's centering halfway down the entire page, not halfway down the div. <a href="http://jsfiddle.net/Lvegtyvo/" rel="nofollow">http://jsfiddle.net/Lvegtyvo/</a></p>
  
  <p>The height of the div is determined by the viewport size, so it is not a definite number. I set the height in <code>#jumbotron-header</code> to be inherited from the parent <code>.jumbotron</code>, but it's ignoring the inherited height and still centering 50% down the entire page. </p>
  
  <p>Does anyone have any idea why the height is not being inherited? Does it have to do with using vh as the height instead of a solid number?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="jumbotron text-center img-responsive" id="jumbotron"&gt;
      &lt;div id="jumbotron-header"&gt;
          &lt;h1&gt;test&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.jumbotron {
      background: url(images/jumbo.png) no-repeat center;
      background-size: cover;
      min-width: 100%;
      min-height: 100vh;
      margin-bottom: 0 !important;
  
  }
  
  #jumbotron-header{
      height: inherit;
      padding-top: 50%;
  }
  </code></pre>