无法在div中垂直对齐div？

Question

我试图垂直对齐中心的div中有一个div。我尝试了vertical-align，position: relative; top: 50%和margin: auto;无济于事。这是代码：

.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;
}

<div class="about three-quarter-width center">
      <img src="rainbow.jpg" class="about-image half-width inline">
      <div class="about-text half-width inline">
        <p class="helvetica gray-spaced center">ABOUT</p>
        <p class="image-text center three-quarter-width">Find out about our organization,
        mission, our methods, and the results of our decades of advocacy.</p>
        <p class="learn-more-button center">LEARN MORE</p>
      </div>
  </div>

我希望div about-text在div about中垂直对齐，但是无法使用上述方法。我正在使用chrome，因此可能与它有关。

Answer 1

只需使用CSS flexbox垂直对齐元素即可。

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Just for the demo */
  background: red;
  height: 100px;
}

.i-am-centered {
  background: yellow;
}

<div class="vertical-align">
  <div class="i-am-centered">
    I am vertical aligned to th center
  </div>
</div>