Vertical Align with Pure CSS

index.html

<div class="outer">
  <p class="vertical-align">
    I am aligned vertically..
  </p>
</div>

style.css

/* Outer DIV */
body{
  margin: 50px;
  font-family: "PT Sans", "serif";
}
.outer{
  margin:50px auto;
  height: 100px;
  background: #f7f7f7;
  border:1px solid #ddd;
  padding: 20px;
}


/* Vertical align CSS */
.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  .vertical-align();
}

Vertical-Align-with-Pure-CSS.markdown

Vertical Align with Pure CSS

A Pen by Mohit Aneja on CodePen.

License.