自动填充屏幕高度的 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>。

下面是我的 cmets 代码，用于进一步解释这个问题。在此先感谢您的帮助！

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

更新：现在一切正常，只是文本不是垂直居中

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

笔：http://codepen.io/giannidk/pen/bgxjLW

Answer 2

首先将您的代码放入容器类中。为了使所有部分居中，请使用 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>