title: Vertically centering content div inside parent div (width in %)
body: <p>I am trying to get the content within #contactboxsplit1 (the blue div in the picture) to sit responsively vertically-centered rather then at the top of it's parent div but cannot figure out how. </p>
  
  <p>Code &amp; screenshot posted below. Thanks in advance for any help. T</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contactsplitwrapper {
    display: block;
    width: 100%;
    float: left;
    color: #000;
    padding-bottom: 7%;
  }
  
  .contactsplitwrapper a {
    color: #000;
  }
  
  .contacttitle {
    display: block;
    width: 100%;
    float: left;
    padding: 3% 0 1% 0;
  }
  
  .contactboxsplit {
    display: block;
    width: 50%;
    float: left;
  }
  
  #contactboxsplitmain {
    background: #2A06E4;
  }
  
  #contactboxsplit1 {
    display: block;
    width: 100%;
    margin: 0 auto;
    background: #2A06E4;
  }
  
  #contactboxsplit1 img {
    width: 7%;
    padding-right: 3%;
    height: .1;
  }
  
  .contactboxhalf {
    width: 49%;
    float: left;
    display: block;
  }
  
  #contactboxhalf2 {
    border-left: solid 1px #000;
  }
  
  #contactboxsplit2 {
    background: #F31115;
  }
  
  #contactboxsplit2 img {
    width: 70%;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contactsplitwrapper" id="#p7"&gt;
    &lt;div class="contacttitle"&gt;
      &lt;header&gt;
        &lt;h2&gt; Where to find us&lt;/h2&gt;
      &lt;/header&gt;
    &lt;/div&gt;
    &lt;div class="contactboxsplit" id="contactboxsplitmain"&gt;
      &lt;div id="contactboxsplit1"&gt;
        &lt;p&gt;
          &lt;h3&gt;For bookings &amp; events please email us at &lt;a href="mailto:info@ninelivesbar.com"&gt;info@ninelivesbar.com&lt;/a&gt; or please call 0207 407 8226.&lt;br&gt;&lt;/h3&gt;
        &lt;/p&gt;
        &lt;div class="contactboxhalf" id="contactboxhalf1"&gt;
          &lt;h3&gt;
            &lt;a href="http mapslink"&gt;
       'NINE LIVES'&lt;br&gt;
       BASEMENT&lt;br&gt;
       8 HOLYROOD STREET&lt;br&gt; 
       LONDON &lt;br&gt;
       SE1 2EL&lt;br&gt;&lt;/p&gt;&lt;/a&gt;
            &lt;p&gt;
              &lt;img src="img/phone.png" class="phoneicon"&gt;0207 407 8226&lt;br&gt;
              &lt;img src="img/mailicon.png"&gt;info@ninelivesbar.com&lt;br&gt;
            &lt;/p&gt;
          &lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="contactboxhalf" id="contactboxhalf2"&gt;
          &lt;h3&gt;
            Opening times&lt;br&gt;&lt;br&gt; Mon | Closed.. for now&lt;br&gt; Tue | 5pm - Midnight&lt;br&gt; Wed | 5pm - Midnight&lt;br&gt; Thu | 5pm - Late&lt;br&gt; Fri | 5pm - Late&lt;br&gt; Sat | 5pm - Late&lt;br&gt; Sun | Closed.. for now&lt;br&gt;&lt;/h3&gt;
          &lt;!-- Left align --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="contactboxsplit"&gt;
      &lt;div id="contactboxsplit2"&gt;
        &lt;img src="img/location.png"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/Rqkxb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rqkxb.png" alt="layout"></a></p>