How can I center a div within another div?

You need to set the width of the container (auto won’t work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

• auto – CSS reference | MDN
• margin – CSS reference | MDN
• What is the meaning of auto value in a CSS property – Stack Overflow

In action at jsFiddle.