CSS *true* Centering
DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

CSS *true* Centering

03.19.2008
| 4452 views |
  • submit to reddit 
        This will truely center something in CSS. Not tested in IE, knowing IE, it will burn in flames.


#center-me { /* There can be only one Centerlander! */
  height: 100%;
  display: table !important;
  margin: auto;
}

#center-me > * {
  display: table-cell !important; /* Don't touch me! I MEAN IT! DON- ... don't touch me. Really, don't touch me. */
  vertical-align: middle !important;
}



<div id="center-me">
  <h1>I'm centered!</h1>
</div>

Comments

lance perry replied on Wed, 2008/03/19 - 7:42am

Yep, you are correct. It does not work in IE.
"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers