Wednesday, March 10th, 2010

Creating a centered DIV

Thursday, April 23rd, 2009 by Jonathan Lau

This post briefly show you how to created a DIV which centers itself on the page.
It relies on pure CSS and does not require any JavaScript.

To center it vertically, you would need to set a fixed height for your page.

HTML:

<div id="centered">Your centered DIV</div>

CSS:

#centered{
width:700px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top: -200px;
}

 

Preview

 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Comments

Receive updates on the comments through RSS 2.0!

There are no comments so far...

Be the first one to comment!

Leave a Reply