title: Jumbotron center text vertically and horizontally
body: <blockquote>
    <p>Having problem with jumbotron centering text horizontal and vertical..
    how do i achieved this? i have tried vertical-align ang text align but
    still not working.. help pls.</p>
  </blockquote>
  
  <h2>HTML CODE HERE</h2>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
          &lt;body&gt;
              &lt;section class="jumbotron-section-1"&gt;
                  &lt;div class="jumbotron no-margin jumbotron-section-1-bg"&gt;
                      &lt;div class="container-fluid introduction"&gt;
                          &lt;h1 class="name"&gt;Full Name&lt;/h1&gt;
                          &lt;p&gt;Some text here..&lt;/p&gt;
                          &lt;a href="#" class="visible-xs btn call-me"&gt;Some text here..&lt;/a&gt;
                      &lt;/div&gt;      
                  &lt;/div&gt; 
              &lt;/section&gt;
          &lt;/body
  &lt;/html&gt;
  </code></pre>
  
  <h2>CSS CODE HERE</h2>
  
  <pre><code>&lt;style&gt;
      .jumbotron-section-1 {
      padding-top: 70px !important;
      }
          .jumbotron-section-1-bg {
          background: url('../img/banner-img/bg10.jpg') no-repeat center center; 
          height: 768px;
          background-size:100% 100%;
          background-attachment: ;
          }
          .introduction {
          text-align: center;
          vertical-align: middle;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          }
          .name {
          font-family: "custom-headerfont",sans-serif;
          }
          .introduction p {
          font-weight: bold;
          }
  &lt;/style&gt;
  </code></pre>