How to: Center a Div With Absolute Positioning

24th November 2010

When using relative positioning the easiest way to center one or a number of div tags is to create a wrapper without any float and set both the left and right margins to auto. However centering becomes problematic when using absolute positioning because using auto left and right margins no longer works in the same way. Instead, you can use this technique…

Select the div you wish to center and take note of what width you have given it. Set the left attribute to 50% and the left margin to minus whatever half of your width is. For example, if you had a 800px wide div you wanted to center you would set the left position to 50% and the left margin to -400px.

Preview the page and you should see that the div is perfectly centered, unless you have a width which is not easily divisible by two and has had to be rounded, then it will just be very very close.

NB: Because this post is more than two years old, and the world of web design and technology moves on so quickly, the information in it may now be out of date


Leave a Reply

Jo Cox Design is great value for money. Jo understood the brief completely, while the handover/after-sales were very reassuring. Two things that I would like to highlight: 1) Jo gives you a useful training session in using WP and 2) the mobile version of my website is particularly exceptional. I can highly recommend Jo to any potential client, from a start-up to a fully fledged organization, looking to make an impact on the web.

Stephen Gregson (Language & Culture)