title: Vertically & Horizontally center align text
body: <p>I have 2 block areas on my website.</p>
  
  <p>I'd like to vertically and horizontally align the text centrally on both areas. Right now it sits below :(</p>
  
  <p>Here is my current code:</p>
  
  <p><a href="https://jsfiddle.net/byp0pevr/" rel="nofollow">https://jsfiddle.net/byp0pevr/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-block div {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
      position: relative;
      color: black;
      z-index: 5;
  }
  
  #adbox1 {
      width: 300px;
      height: 620px;
      position: absolute;
      top: 0;
      left: 10px;
  }
  
  #adbox2 {
      width: 300px;
      height: 300px;
      position: absolute;
      top: 0;
      left: 320px;
  }
  
  .image-holder {
      display:inline-block;
      position: relative;
  }
  .image-holder:after {
      content:'';
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      background: black;
      opacity: 0;
  }
  .image-holder:hover:after {
      opacity: 0.1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="adbox1" class="image-holder"&gt;
    &lt;img src="http://placehold.it/300x620" title="1"&gt;
    &lt;div class="text-block"&gt;
      &lt;div&gt;Some&lt;br&gt;Text&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="adbox2" class="image-holder"&gt;
    &lt;img src="http://placehold.it/300x300" title="1"&gt;
    &lt;div class="text-block"&gt;
      &lt;div&gt;Some&lt;br&gt;Text&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>