Here is a example how works the vertical alignment with transform translate property.
A Pen by Renato Ribeiro on CodePen.
<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; | |
} | |
} |
Here is a example how works the vertical alignment with transform translate property.
A Pen by Renato Ribeiro on CodePen.