title: text in footer won't align to bottom center
body: <p>As the title suggests I'm trying to align my text in my footer to be horizontally center and aligned to the bottom.</p>
  
  <p>Having read other's solutions, I've tried to set the parent div to relative, the p element to absolute, and then bottom: 0;/vertical-align: bottom; But doesn't work. </p>
  
  <p>What happens is that the text moves up into the above div and is no longer horizontally centered.</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>/*Section3*/
  #section3 {
    height: 50%;
    background: #6ed3cf;
    text-align: center;
    padding: 0 0 0.5em;
    height: 20em;
  }
  
  #section3 h2 {
    font-size: 2em;
    font-weight: 200;
  }
  
  #section3 i {
    padding: 0.5em;
    color: black;
  }
  
  /*Footer*/
  #footer {
    background:#fff;
    color: black;
    height: 10%;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    display: table;
  }
  
  #footer p {
    font-size: 0.7em;
    text-align: center;
    position: absolute;
    bottom: 0;
    vertical-align: bottom;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="section3" style="display:flex;justify-content:center;align-items:center;"&gt;
   &lt;div&gt;
    &lt;h2&gt;header&lt;/h2&gt; 
    &lt;div class="container"&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
       &lt;p&gt;blablablablablablablablablablablablablablablablablablablablabla&lt;/p&gt;
       &lt;a href="#"&gt;&lt;i class="fa fa-envelope fa-2x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 
       &lt;a href="#"&gt;&lt;i class="fa fa-linkedin-square fa-2x" aria-hidden="true"&gt;&lt;/i   &gt;&lt;/a&gt;  
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Footer --&gt;
  &lt;div id="footer"&gt;
   &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-4 col-md-offset-4"&gt;
      &lt;p&gt;text&lt;/p&gt; 
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>