title: How do i vertically align the text in the center of jumbotron?
body: <p>I'm trying to vertically align the text in the center of my jumbotron but the code i previously used which involved absolute positioning and 50% from top and bottom doesn't seem to work for this</p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
          &lt;h1 class="text-center"&gt;&lt;span class="first"&gt;UZER&lt;/span&gt;&lt;span class="last"&gt;JAMAL&lt;/span&gt;&lt;/h1&gt;
          &lt;p class="text-center" id="respon"&gt;Responsive web designer&lt;/p&gt;
          &lt;p class="text-center" id="langs"&gt;HTML - CSS - BOOTSTRAP - JQUERY&lt;/p&gt;
      &lt;/container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.jumbotron{
  height:100vh;
  background:url('./Images/Jumbo.jpg') no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  width:100%;
  position:absolute;
  top:0;
  z-index:-100;
  }
  
  h1{
  margin-bottom: -0.7em;
  }
  h1 .first{
  color:white;
  font-family:secretcode;
  font-size:2em;
  }
  
  h1 .last{
  color: #bd902e;
  font-family:aku;
  font-size:1.7em;
  }
  
  .jumbotron #respon{
  font-family:geosans;
  color:white;
  font-size:4em;
  margin-bottom:-0.2em;
  }
  
  .jumbotron #langs{
  font-family:geosans;
  color:#bd902e;
  font-size:2em;
  }
  </code></pre>
  
  <p>Also is there a way to bring the h1 and p vertically closer to each other without using negative margin? I don't think using -0.7em is the right way to do it</p>
  
  <p>Code<a href="https://jsfiddle.net/ivinraj/zhuv5ukb/" rel="nofollow"><strong>Jsfiddle.net</strong></a></p>