Skip to content

Instantly share code, notes, and snippets.

@maneja81

maneja81/Vertical-Align-with-Pure-CSS.markdown

Created March 2, 2015 17:35
Show Gist options
  • Save maneja81/f56864e1f544101f2941 to your computer and use it in GitHub Desktop.
Save maneja81/f56864e1f544101f2941 to your computer and use it in GitHub Desktop.
Download ZIP
Vertical Align with Pure CSS
Raw
index.html
<div class="outer">
<p class="vertical-align">
I am aligned vertically..
</p>
</div>
Raw
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment