Centre and float a div over page content with CSS – no hacks, cross browser

Problem

If you need to center a div (or any another block element) over the rest of the content in a page, and you need it to be cross-browser and valid (CSS and XHTML)…

Solution

Try the following CSS in your stylesheet or page head:

#cdiv {
  position:absolute; /* important. */
  left:50%; /*important if you want it absolutely centred in window. */ 
  margin-left:-50px; /* importnant. must be half the width. */
  width:100px; /* set to your requirements, but remember left margin setting. */
  height:100px; /* not neccessary if the element needs to grow with content. */
  border:1px solid #ABF; /* not important. */
  background-color:#DDF; /* not important. */
  text-align:center; /*not important. */
}

… and now set the ID of the element you want centered to ‘cdiv’. If the item you want to centre is an image, remember to add display:block; to the style (this makes it act like a block level element).

This style works perfectly (by my testing, but I’m not perfect) on:

  • Internet Explorer 6, 7 & 8+
  • Firefox 2.*+
  • Opera 8 & 9+
  • Google Chrome (all versions)
  • Safari (Mac and PC versions)
  • Netscape 9 (is anyone still using this?)
Any problems, please post a question or comment below.

Please let me know if this post was useful with a click!
Nope, not helpful...Yep, more useful than not! (No Ratings Yet)
Loading...

One thought on “Centre and float a div over page content with CSS – no hacks, cross browser”

Leave a Reply

Your email address will not be published.