Загрузочный центр текста в div, который автоматически заполняет высоту экрана

Question

Совершенно новый здесь, я постараюсь изо всех сил объяснить. Я пытаюсь сделать одностраничное загрузочное приложение с несколькими <div> и навигационной панелью в самой верхней части страницы. Я бы хотел, чтобы <div> заполнил высоту окна браузера, с текстом в центре этого div.

Мои проблемы

1. текст не будет центра
2. если удалить внешнюю оболочку <div id="welcome" class="welcome"> и поставить CSS на "container fill-height", весь раздел становится в среднем, но не весь экран широкий. Я понятия не имею, почему нам нужны две обертки для этого <div class="textWelcome"><h2>welcome to first div</h2></div>.

Ниже приведен мой код с комментариями для дальнейшего объяснения вопроса. Заранее спасибо за вашу помощь!

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

Это мой текущий CSS, который не работает:

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

Update: Теперь все кажется нормально, за исключением того текста не центрирован

<div class="container fill-height"> 
     <div class="row"> 
     <div class="col-lg-1"></div> 
     <div id="hello" class="col-lg-10"> 
       <h1 style="text-align:center;"> Hello World</h1> 
     </div> 
     <div class="col-lg-1"></div> 
    </div> 
    </div> 

и CSS:

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

Answer 1

Вы можете использовать свойство преобразования:

#hello{ 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
font-family: 'Georgia'; 
color: rgb(255, 255, 255); /*white text*/ 
font-weight: bold 
} 

Pen: http://codepen.io/giannidk/pen/bgxjLW

Answer 2

Прежде всего, r в контейнере class.И чтобы сделать весь раздел в центре, используйте bootstrap. Вы можете использовать text-align: center; для создания текста в центре. Ниже приведен код:

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-1"></div> 
     <div class="col-lg-10"> 
     <h1 style="text-align:center;"> Hello World</h1> 
     </div> 
    <div class="col-lg-1"></div> 
    </div> 
</div>