title: Vertically aligned in a div
body: <p>I'm sorry to post another vertical alignment question but since I'm a total beginner I don't know what else to do.  </p>
  
  <p>I have a fullscreen background image and I want to vertically align the h1, p and button sections, so no matter what the screen height is, the text block should always be centered. I tried to achieve this with adding margin-top to the section but it's not perfect. I'm using Bootstrap.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;section id="home"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-6"&gt;
                  &lt;h1&gt;dolm it&lt;/h1&gt;
                  &lt;p&gt;Dolm IT is modern design &amp; development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML &amp; CSS.&lt;/p&gt;
                  &lt;button type="button" class="btn btn-default white"&gt;more&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end container--&gt;
  &lt;/section&gt;
  &lt;!--end home--&gt;
  </code></pre>
  
  <p>And here's the CSS I've created:</p>
  
  <pre><code>       #home {
              background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
              background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
              background-size: cover;
              width: 100%;
              height: 100vh;
          }
  
          #home h1 {
              color: #ffffff;
              font-family: 'Akrobat-ExtraBold';
              font-size: 4.9rem;
              text-transform: uppercase;
              letter-spacing: 2px;
              margin-bottom: 32px;
          }
  
          #home p {
              color: #ffffff;
              font-family: 'Akrobat-Bold';
              font-size: 1.5rem;
          }
  
          #home .col-md-6 {
              margin-top: 200px;
              padding: 130px 0 130px 0;
          }
  </code></pre>
  
  <p>You can see the test page <a href="http://dolm.ragne.me/" rel="nofollow">here</a>. Thank you for your help.</p>