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?)

Please let me know if this post was useful with a click!
(No Ratings Yet)
Loading…