Skip to content

Instantly share code, notes, and snippets.

@dotmaster

dotmaster/gist:731777

Created December 7, 2010 13:12
Show Gist options
  • Save dotmaster/731777 to your computer and use it in GitHub Desktop.
Save dotmaster/731777 to your computer and use it in GitHub Desktop.
Download ZIP
CSS vertical centering in all major browsers (including ie6) using less css and conditional comments
Raw
gistfile1.css
.vcenter{
body{
display: table;
.ie6,ie7,ie8,ie9{ //thanks to our conditional comments (see comments below)
position: relative; //for ie
#container{
position:absolute; //for ie
top:50%; //for ie
#page{
position:relative; //for ie
top:-50%; //for ie
}
}
}
#container{
display: table-cell; vertical-align: middle; //vertical alignment for all others
}
}
}
@dotmaster
Copy link
Author

how it works:

use a conditional comment in your HTML5 Boilerplate like the following

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <body lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

then create a structure of divs like the following

note that we need at least three levels of nesting for Internet Explorer to work



Some vertically centered content




Now drop in the vcenter class in your less file:

html{
  .vcenter;
}

@dotmaster
Copy link
Author

This less script is based on this blog post http://www.jakpsatweb.cz/css/css-vertical-center-solution.html, but enhances it, cause we use conditional comments to determine the browser we are working with.

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