Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vertical Aignment
<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>
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.