title: Bootstrap center text in a div that automatically fill the height of screen
body: <p>Quite new here, I'll try my best to explain. I'm trying to do a one page bootstrap application with several <code>&lt;div&gt;</code> and a nav bar on the very top of the page. I'd like that <code>&lt;div&gt;</code> fill the height of browser window, with text in the center of that div.</p>
  
  <p>My problems </p>
  
  <ol>
  <li>the text won't center  </li>
  <li>if I remove the outer wrapper <code>&lt;div id="welcome" class="welcome"&gt;</code> and put the css on <code>"container fill-height"</code>, the whole section becomes in the middle but not full screen wide. I have no idea why we need two wrappers for that <code>&lt;div class="textWelcome"&gt;&lt;h2&gt;welcome to first div&lt;/h2&gt;&lt;/div&gt;</code>.  </li>
  </ol>
  
  <p>Below is my code with comments to further explain the question. Thanks in advance for your help!   </p>
  
  <pre><code>&lt;div id="welcome" class="welcome"&gt;  // when user scroll to this div, it fills the screen under nev bar
     &lt;div class="container fill-height"&gt;
        &lt;div class="textWelcome"&gt;
            &lt;h2&gt; Welcome to first div &lt;/h2&gt; //this text should be in the middle of the "welcome" div 
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my current CSS which does not work:</p>
  
  <pre><code>.welcome{
      padding-top: 150px;
      padding-bottom: 150px;
      background: #E41b13; 
   }
  
  .textWelcome{
     vertical-align: middle;
     font-family: 'Georgia';
     color: rgb(255, 255, 255); /*white text*/
     font-weight: bold
  }
  </code></pre>
  
  <p>Update: Now everything seems ok except that text is not vertically centered </p>
  
  <pre><code>    &lt;div class="container fill-height"&gt;
        &lt;div class="row"&gt;
         &lt;div class="col-lg-1"&gt;&lt;/div&gt;
           &lt;div id="hello" class="col-lg-10"&gt;
                &lt;h1 style="text-align:center;"&gt; Hello World&lt;/h1&gt;
           &lt;/div&gt;
         &lt;div class="col-lg-1"&gt;&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.fill-height{
     padding-top: 150px;
     padding-bottom: 150px;
     background: #E41b13; 
     min-height: 100%;
     height:100vh;
   }
  
  #hello{
    vertical-align: middle;
    font-family: 'Georgia';
    color: rgb(255, 255, 255); /*white text*/
    font-weight: bold
  }
  </code></pre>