title: Cannot vertically align div within div?
body: <p>I have a div within a div that I am trying to vertically align center. I have tried <code>vertical-align</code>, <code>position: relative; top: 50%</code>, and <code>margin: auto;</code> to no avail. Here is the code:</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>.main {
    font-family: "adobe-garamond-pro";
    padding: 40px 0px;
    color: rgba(26,26,26,0.7)
  }
  
  .intro-title {
    width: 90%;
    padding: 40px;
    color: rgba(26,26,26,0.9);
  }
  
  .center {
    margin: 0px auto;
  }
  
  .three-quarter-width {
    width: 75%;
    text-align: center;
  }
  
  .two-third-width {
    width: 66%;
  }
  
  .half-width {
    width: 50%;
  }
  
  .whitespace {
    height: 7em;
  }
  
  .about {
    overflow: hidden;
    background-color: red;
    }
  
  .about-image {
    height: auto;
    float: left;
  }
  
  .about-text {
    height: 100%;
    float: right;
    background-color: blue;
  }
  
  .inline {
    display: inline;
  }
  
  .helvetica {
    font-family: helvetica;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="about three-quarter-width center"&gt;
        &lt;img src="rainbow.jpg" class="about-image half-width inline"&gt;
        &lt;div class="about-text half-width inline"&gt;
          &lt;p class="helvetica gray-spaced center"&gt;ABOUT&lt;/p&gt;
          &lt;p class="image-text center three-quarter-width"&gt;Find out about our organization,
          mission, our methods, and the results of our decades of advocacy.&lt;/p&gt;
          &lt;p class="learn-more-button center"&gt;LEARN MORE&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like the div <code>about-text</code> to be vertically aligned within the div <code>about</code> but haven't been able to with the above methods. I'm using chrome so that might have something to do with it. </p>