Skip to content

Instantly share code, notes, and snippets.

@yankeyhotel

yankeyhotel/Vertically Align CSS Styles

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yankeyhotel/24610d72ead860227484 to your computer and use it in GitHub Desktop.
Save yankeyhotel/24610d72ead860227484 to your computer and use it in GitHub Desktop.
Download ZIP
Vertical Align with display:tables
Raw
Vertically Align CSS Styles
.valign-hldr {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.valign-table {
display: table;
height: 100%;
width: 100%;
}
.valign-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Raw
Vertically Align HTML Markup
<div class="valign-hldr">
<div class="valign-table">
<div class="valign-cell">
<!-- Content can be anything -->
</div>
</div>
</div>
@yankeyhotel
Copy link
Author

Thanks to http://css-tricks.com/centering-in-the-unknown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment