To center anything in CSS you use text-align (poor choice of names as it works for elements too). So the first thing you need to do in your CSS is to say anything in the body is to be aligned center -
text-align: center;

Then you want to say that the containing element should align itself equally in that container. For this you do as Thelma suggested and use
margin: 0 auto;

What you have done there is told the browser that the containing element (#container) should have no margin top or bottom (that is the "0". If you use one number it is all sides. 2 numbers - the first number is top/bottom & second number is right/left. 4 numbers in order are Top/Right/Bottom/Left) and auto means a automatic margin left & right. the wider the screen bexond the container, automatically more margin. Narrow dead space beyond the container gives automatically less margin. This then keeps the container centered.

Padding/margins and positioning are really two completely different things.

Consider the CSS Box Model where you've got your content surrounded by padding, then the border, then the edge of the box, then margins outside the box.

When you adjust the padding, you're adding more space between the content and the outside of the box. The edge of the box need to expand to accommodate that extra space. The content remains the same. (Except in all versions of IE5 for Windows which does it the other way around. The box remains the same and the content shrinks)

If the top, left corner of the box was sitting 10px from the top, left of the window before adding padding, the top, left corner of the box would still be sitting 10px from the top, left of the window after adding padding. But because the size of the box has increased, the content - what you are actually seeing - is going to farther away from the corner. Hence it appears you have moved something, but you're haven't really, just changed the dimensions of the box.

With positioning, on the other hand, you are actually moving the box.

When you move it with relative positioning, you're using the original location of the box as a reference and moving it relative to that. So if you were to specify position: relative; top: 10px; left: 10px; the top left corner of the box is now going to be 10px down and to the left from where it would have been if you had left it alone. (You could also use bottom or right as references.)

But - this is where it gets funky - even after you've moved the box with relative positioning, the space where it used to sit is still occupied. Think of it as a ghost of the box staying behind and taking up room. Nothing can go there without forcing it because the 'ghost box' is in the way. Other boxes around it act as if it was still there. However the box takes up no space in it's new location. Other boxes can sit in the same spot. Anything around it ignores it in it's new location.

When you move the box with absolute positioning, you're placing it in new location using co-ordinates you define. It's new spot is an absolute location defined by those co-ordinates. Where the box used to sit has no bearing. The co-ordinates and the box's new location use the edge of the window by default as a reference. However if the box were sitting inside another box, and that outer box has been positioned, then the co-ordinates and the box's location use the edges of the outer box as a reference.

A box that has been moved with absolute positioning no longer occupies any space anywhere, either in it's new location, or in it's old location. Think of it as being ripped out of this dimension and existing in another. As soon as absolute positioning is applied - poof! its gone. But we can still see it. Other boxes around will behave as if it doesn't exist and never did. They will quite happily move into whatever space it used to take up and co-exist with it in it's new location.