自动填充屏幕高度的 div 中的引导中心文本 [重复]

Posted 2023-03-05

【中文标题】自动填充屏幕高度的 div 中的引导中心文本 [重复]

【英文标题】：Bootstrap center text in a div that automatically fill the height of screen [duplicate]

【发布时间】：2017-06-24 04:46:54

【问题描述】：

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

我的问题

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

【参考方案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

【讨论】：

另外，记住包含元素中的相对位置。

【参考方案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>

【讨论】：

他说的是垂直中心。

是的@UbiquitousDevelopers，但他的主要问题是使文本居中，所有部分垂直居中。可以使用 class="container" 来完成。并通过使用引导网格。

谢谢，但文本垂直中心仍然不起作用。我们需要<div class="col-lg-1"></div> 做什么？我已根据您的建议更新了我的代码

@user4046073，你不需要在<div class="col-lg-1"></div>里面放任何东西。留空。请通过引导网格，你会明白的。它有助于使您的部分居中。

给我提琴，我给你详细解释。