Dezinerfolio

The simplest way to horizontally and vertically center a DIV

Your rating: None Average: 4 (182 votes)

I have gone trough a lot of ways to horizontally and vertically center a DIV. Many of the code snippets had a Child DIV1 inside a Parent DIV2 to center the Child. They work perfect but I found a simpler way to center a single DIV trough CSS.

I am not sure if this is already known to all, but I experimented and came up with this simple CSS snippet.

Here is a visual representation of how this works:

vertically center a div

Here is the CSS Snippet to be assigned to the DIV to be centered. The size of the DIV is 100 x 100 px ( same as the above example ).

/* CSS Document */

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

Here is another example with size 500 x 200 px.

/* CSS Document */

.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}

You can also find an online example here

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/188

Comments

Anonymous's picture

hey its a very good tutorial to work on div.

Mazhar Khan (not verified)
Thu, 09/17/2009 - 16:40
Anonymous's picture

Eveгything posted was actuаllу veгy logiсаl.
Howeveг, сonѕider thіs, suppοѕe you typed
a cаtchier poѕt title? I mean, I don't wish to tell you how to run your website, but suppose you added a post title that grabbed folk'ѕ
attention? I mean Reply to commеnt | Dezinerfolio is kinda boring.
You might looκ at Yahoo's front page and see how they create article titles to grab people to click. You might add a related video or a related picture or two to get readers interested about everything've written.
In my opinion, it wοuld bring уοur wеbsite
a lіttle bіt more interesting.

Mon, 12/31/2012 - 02:33
Anonymous's picture

Thanks for your tutorials!

suffering (not verified)
Tue, 09/15/2009 - 11:01
Anonymous's picture

but in my variant you can not initialize height! that's very good

Pavel (not verified)
Sun, 09/13/2009 - 16:45
Anonymous's picture

This is a bad solution.. try to resize browser window... i think you will be unhappy.
I using another way.


Pavel (not verified)
Sun, 09/13/2009 - 16:39
Anonymous's picture

I like this for its simplicity but I have one problem - if the browser is smaller than the div, the scroll bar only allows you to scroll to the right and hides content on the left side.

Colin Henson (not verified)
Fri, 09/11/2009 - 08:48
Anonymous's picture

Great!
=)

/cheers

sergioelmoreno (not verified)
Wed, 09/09/2009 - 16:57
Anonymous's picture

wow...i was searching for a good method to put div in center....i got it....thank u............

Sijo (not verified)
Thu, 09/03/2009 - 16:01
Anonymous's picture

Yeah, for a starter, this might be considered the ultimate solution, but to say the least, this is quite a lot of work for something as simple as centering a div.

This should take care of your center div, with out having on the extra styles.
.your_div{
width: 500px;
height: auto;
margin: 0px auto; <!--this code is all your need to really center the div-->
}

Benga creative

Benga (not verified)
Fri, 08/28/2009 - 18:58
Anonymous's picture

Yeah, for a starter, this might be considered the ultimate solution, but to say the least, this is quite a lot of work for something as simple as centering a div.

This should take care of your center div, with out having on the extra styles.
.your_div{
width: 500px;
height: auto;
margin: 0px auto; <!--this code is all your need to really center the div-->
}

Benga creative

Benga (not verified)
Sat, 09/05/2009 - 23:17