Skip to content

Instantly share code, notes, and snippets.

@charlietran
Created February 2, 2012 23:24
Show Gist options
  • Save charlietran/1726418 to your computer and use it in GitHub Desktop.
Save charlietran/1726418 to your computer and use it in GitHub Desktop.
CSS vertical centering for IE7+
/******************************************************************************
Vertical centering of variable-height content
Compatible with IE7 and below
Author: Charlie Tran
Date: Feb 2012
Agency: FreeAssociation (www.thinkfa.com)
More elegant solution here if you only care about IE8+: http://goo.gl/UN80L
Markup
--------------------------
<div class="vcenter-outer">
<div class="vcenter-inner">
<div class="vcenter-content">
CENTERED CONTENT HERE
</div>
</div>
</div>
--------------------------
The additional 'vcenter-content' wrapper is
unfortunately necessary for IE7 and below compatibility
*******************************************************************************/
.vcenter-outer
{
display: table;
overflow: hidden;
position: relative;
}
.vcenter-inner
{
display: table-cell;
vertical-align: middle;
width: 100%;
/* For horizontal centering, optional */
margin: 0 auto;
text-align: center;
}
/*******************************************************************************
For IE7 and below, assumes use of IE-conditional HTML tags from H5BP
http://goo.gl/CRQY (2012.01.17 update)
*******************************************************************************/
.lt-ie8 .vcenter-inner
{
position: absolute;
top: 50%;
}
.lt-ie8 .vcenter-content
{
position: relative;
top: -50%;
}
@keighl
Copy link

keighl commented Mar 20, 2012

Make sure whatever element .vcenter-outer is applied to also has a defined height. Good stuff, charlie!

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