Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

prabhu lingam
prabhu lingam
6,955 Points

how does setting the margin to 0 align it to the center. should'nt we give center and 0 as values.

as 0 will align it to left

3 Answers

Julian Gutierrez
Julian Gutierrez
19,201 Points

When setting an elements margin to

margin:0 auto;

the first value is setting the margin for top and bottom and second value is setting the value for left and right so the value auto is what is centering the element not 0. By using auto the browser sets the left and right margin to equal values centering your targeted element.

Julian Gutierrez
Julian Gutierrez
19,201 Points

Let us say that you have a container div with a width of 1000px. You also have an image inside of that container div that is 500px wide. The browser has 500px of empty space to split up evenly which would make the left and right margin equal to 250px each. So it really depends on the width of the container or parent.

Zubair Siddique
Zubair Siddique
4,889 Points

You said, "by using auto the browser sets the left and right margin to equal values centering your targeted element".

What value does the browser use to make it automatically center? 50px and 50px from each side? Or what?