Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.