Question

这里很新，我会尽力解释。我尝试在页面顶部使用多个<div>和导航栏进行单页引导程序。我希望<div>填充浏览器窗口的高度，文本位于该div的中心。

我的问题

文字不会中心
如果我移除外包装<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
}

更新：现在一切似乎都没问题，除了文字没有垂直居中

    <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

首先将你的代码放在容器类中。为了使所有部分都在中心，使用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>

Answer 2

您可以使用transform属性：

executeMethod

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

div中的引导中心文本自动填充屏幕

2 个答案: