Skip to content

Instantly share code, notes, and snippets.

@OmShiv
Last active August 29, 2015 14:02
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 OmShiv/d4c0f8dc855aea24d095 to your computer and use it in GitHub Desktop.
Save OmShiv/d4c0f8dc855aea24d095 to your computer and use it in GitHub Desktop.
Vertical Horizontal Center
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
<style>
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
/* for IE less than 7 */
.outer {
display: inline;
top: 0;
}
.middle {
display: inline;
top: 50%;
position: relative;
}
.inner {
display: inline;
top: -50%;
position: relative;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment