Vertical Aignment

index.html

<h1>
  <strong>Vertical</strong> Alignment<br />
  <small>with css3 translate</small>
</h1>
<div class="outer parent">
  <span>relative</span>
  <div class="inner vcenter">absolute</div>
</div>

style.scss

@import url(http://fonts.googleapis.com/css?family=Raleway:100,300,400,700);

html, body {
  height: 100%;
}

body {
  font-family: 'Raleway';
  font-weight: 300;
  background: #ecf0f1;
  font-smoothing: antialiased; 
}

h1 {
  font-size: 45px;
  line-height: 30px;
  font-weight: 100; 
  text-align: center;
  color: #34495e;
  letter-spacing: -2px;
  small {
    font-size: 25px;
    font-weight: 300;
    line-height: 25px;
    letter-spacing: 0;
    color: #999;
  }
}

.outer {
  width: 300px;
  height: 300px;
  animation: expand 8s linear infinite;
  background: #34495e;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
  span {
    padding-top: 15px;
    width: 100%;
    display: inline-block;
    text-align: center;
    color: rgba(255,255,255,.3);
  }
}

.inner {
  width: 120px;
  height: 120px;
  background: #e74c3c;
  text-align: center;
  line-height: 120px;
  border-radius: 2px;
  color: rgba(255,255,255,.3);
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
}

.parent {
  position: relative;
}

.vcenter {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translatex(-50%) translatey(-50%);
}

@keyframes expand {
  0%, 10%, 100% {
    width: 300px;
    height: 300px;
  }
  20%, 30% {
    width: 400px;
    height: 400px;
  }
  40%, 50% {
    width: 160px;
    height: 200px;
  }
  60%, 70% {
    width: 330px;
    height: 330px;
  }
  80%, 90% {
    width: 550px;
    height: 250px;
  }
}

Vertical-Aignment.markdown

Vertical Aignment

Here is a example how works the vertical alignment with transform translate property.

A Pen by Renato Ribeiro on CodePen.

License.