Flat-Style Div arrangement issue
<p>I'm trying to make a webpage what has 4 full-width divs that have information vertically centered within them. Sort of like these:<br><br>
<a href="http://www.rokivo.com/" rel="nofollow">http://www.rokivo.com/</a>
<br><a href="https://dribbble.com/shots/2582917-Klas-Ranking-Landing-Page" rel="nofollow">https://dribbble.com/shots/2582917-Klas-Ranking-Landing-Page</a>
<br><br>I have tried using 3 dividers to center the elements but I cannot make the divs line up like in the examples. Here is the basic code:<br></p>

<pre><code>&lt;div id="elem1"&gt;
  &lt;div class="outerDiv"&gt;
    &lt;div class="middleDiv"&gt;
      &lt;div id="content"&gt;
        &lt;!-- Content Here--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="elem2"&gt;
  &lt;div class="outerDiv"&gt;
    &lt;div class="middleDiv"&gt;
      &lt;div id="content2"&gt;
        &lt;!-- Content Here--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


outerDiv {
  height: 90%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
middleDiv {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</code></pre>

<p>How can I accomplish this?</p>