A Pen by Eric.

index.html

<div id="box">
  <div id="center">
    <h1>
      This content is centered vertically in the gray box.
    </h1>
    <h2>
      The gray box has a varying height.
    </h2>
    <p>
      There are multiple elements in the gray box.
    </p>
  </div>
</div>

style.css

@keyframes resize {
  0% {
    height: 300px;
  }
  50% {
    height: 500px;
  }
}
#box {
  margin: 20px auto;
  width: 50%;
  height: 300px;
  background-color: #EEE;
  padding: 0 20px;
  white-space: nowrap;
  animation: resize 5s infinite;
}
#center {
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
}
#box:after {
  content: "";
  width: 1px;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
  margin-right: -10px;
}

Vertical-Centering.markdown

Vertical Centering

CSS for vertically centering multiple elements.

A Pen by Eric on CodePen.

License.

Demo is here: http://codepen.io/ejsado/pen/bFuBz