Boot Strap center text in a div that automatically fill the height of screen

Quite new here, I'll try my best to explain. I'm trying to do a one page bootstrap application with several <div> and a nav bar on the very top of the page. I'd like that <div> fill the height of browser window, with text in the center of that div.

My problems

1. the text won't center
2. if I remove the outer wrapper <div id="welcome" class="welcome"> and put the css on "container fill-height", the whole section becomes in the middle but not full screen wide. I have no idea why we need two wrappers for that <div class="textWelcome"><h2>welcome to first div</h2></div>.

Below is my code with comments to further explain the question. Thanks in advance for your help!

<div id="welcome" class="welcome">  // when user scroll to this div, it fills the screen under nev bar
   <div class="container fill-height">
      <div class="textWelcome">
          <h2> Welcome to first div </h2> //this text should be in the middle of the "welcome" div 
      </div>
   </div>
</div>

This is my current CSS which does not work:

.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
}