Centering a DIV using the negative margin method

The following CSS will center a DIV whih is 500px wide. This method is very clean and works in all browsers.

div { 
    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -250px;

Change the width to suit your needs then change the margin-left to half the width of the div.

Author Paul Hayman

Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.

Paul is the COO and co-founder of kwiboo ( and is also the creator of GeekZilla.


John S. said:

Is there some reason margin { 0 auto; } doesn't work?

21/Jun/2007 18:55 PM

Brennan Stehling said:

How about when width is 100%?

21/Jun/2007 19:00 PM

phayman said:

Why would you want to center a div which was 100% wide? Surely it would fill the screen anyway?

21/Jun/2007 19:31 PM

Brennan Stehling said:

Sorry, I typed that too fast. I meant a percentage, like 70%. Many times I have a fluid layout so I do not know the width. Previously I have resorted to using Javascript to adjust the CSS rules to auto-correct browser differences. I also resort using text-align for the browsers that treat blocks like inline text.

21/Jun/2007 22:22 PM

TweeZz said:

I think what Brennan meant was that what if the parent element has width:100%, but the div itself let's say 100px;

How do you get that div to center in the parent element?

22/Jun/2007 04:58 AM

John S. said:


<div style="width: 70%; margin: 0 auto; height: 300px; background-color: #f00;">centered</div>

22/Jun/2007 19:02 PM

Mike K said:

Handy! Works a treat! Thanks

27/Jun/2007 17:37 PM

Sam said:

Paul, you are my hero. What a gem of simple information rather than being forced into using relative positioning with auto margins.

02/Oct/2007 01:56 AM

Adam Bell said:

Cheers for that div - worked like a treat.

15/Jul/2008 12:22 PM

asedt said:

I dont like this method, if the window size is below the width the content gets otside the window so you cant srcoll to it. I don't know any workaround for that. So i prefer any margin: 0 auto + IE text-align: center fix or liqid design with margin: 0 10% or exual method.

18/Dec/2008 23:02 PM

Nick Rosener said:

Thank you so much! I have been researching this for a long time, and this method works very well.

-Nick Rosener

Tech Nick Consulting

18/Jul/2010 19:23 PM

Peter said:

Man, this is the most brainy solution to my problem. I mean this works when a div is wider than the browser window or screen. I was very frustrated for not being able to solve this without Javascript.

30/Sep/2010 05:48 AM

Bradley T said:

OMG!!! Thank YOU!

I have also been looking for a long time for a simple solution for this. It works perfect for my needs. No javascrip, No jquery.

Just simple, simple, CSS.

23/Mar/2012 04:54 AM

Add Comment


Your comment has been received and will be shown once it passes moderation.