title: Centering vertically - Position: absolute not working
body: <p>I have been having problems when trying to center a <code>div</code> vertically. From what I have read I have tried with <code>flexbox</code> but failed and then I tried with <code>position: absolute</code> but also failed, e.g.
  HTML:</p>
  
  <pre><code>&lt;div="parent"&gt;
   &lt;div="child"&gt;
    &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;h3&gt;This is a subtitle&lt;/h3&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .parent{
      position: relative;
    }
  
   .child{
      position: absolute;
      top: 50%;
      transform: translateY(50%);
    }
  </code></pre>
  
  <p>From what I have been reading this should work, <strong>so here is my actual code hoping that you guys can find the solution to my problem.</strong></p>
  
  <p><strong><em>HTML</em></strong>:</p>
  
  <pre><code>&lt;section class="mainSection"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
  
             &lt;!-- THIS IS THE SECTION THAT I CAN'T GET TO WORK --&gt;
                    &lt;div class="mainSection-mainTitleWrapper"&gt;
                      &lt;div class="mainSection-mainTitle"&gt;
                          &lt;h1&gt;Creating value&lt;/h1&gt;
                          &lt;h3&gt;Through quality assets&lt;/h3&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
            &lt;!-- THIS IS THE END OF THE SECTION THAT I CAN'T GET TO WORK --&gt;
  
  
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="contactForm"&gt;
                      &lt;h4&gt;Buy, Sale &amp; Rent&lt;/h4&gt;
                      &lt;p&gt;Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text.&lt;/p&gt;
                      &lt;form&gt;
                          &lt;input type="text" name="user_name" placeholder="FULL NAME"&gt;
                          &lt;input type="emial" name="user_email" placeholder="EMAIL"&gt;
                          &lt;input type="tel" name="user_phone" placeholder="PHONE"&gt;
                          &lt;select&gt;
                              &lt;option value="buy"&gt;BUY&lt;/option&gt;
                              &lt;option value="sale"&gt;SALE&lt;/option&gt;
                              &lt;option value="rent"&gt;RENT&lt;/option&gt;
                          &lt;/select&gt;
  
                          &lt;select&gt;
                              &lt;option value="price" disabled selected&gt;PRICE&lt;/option&gt;
                              &lt;option&gt;&lt;$100,000.00&lt;/option&gt;
                              &lt;option&gt;&lt;$200,000.00&lt;/option&gt;
                              &lt;option&gt;&lt;$400,000.00&lt;/option&gt;
                              &lt;option&gt;&lt;$600,000.00&lt;/option&gt;
                              &lt;option&gt;&lt;$1,000,000.00&lt;/option&gt;
                          &lt;/select&gt;
  
                          &lt;input type="submit" name="find" value="FIND NOW"&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong><em>CSS</em></strong>:</p>
  
  <pre><code>.mainSection{
     background: url('img/background.jpg') no-repeat center center;
     background-size: cover;
     box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.4);
     padding-bottom: 50px;    
  }
  
  .mainSection-mainTitleWrapper{
     position: relative;
  }
  
  
  .mainSection-mainTitle{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
  }
  
  .mainSection-mainTitle h1{
     font-size: 65px;
     color: #fff;
     font-weight: bold;
     text-transform: uppercase;
  }
  
  .mainSection-mainTitle h3{
     font-size: 35px;
     color: #fff;
     font-weight: bold;
     text-transform: uppercase;
  }
  </code></pre>
  
  <p>Sorry for the lengthy question, <strong>but does anyone have an idea of why is it not working or another possible solution to vertically center the .mainSection-mainTitle <code>div</code>?</strong></p>