The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.

Check out the pictures on the website and it'll be clear.

You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".

The HTML simply discovers if it's IE and its version or if it's not IE. The jQuery discovers if it's IE, Firefox, Webkit Engine (Chrome and Safari) or Opera and its version.

How to know if an element exists in JS (and jQuery).

Alternate between the #centro { height } to validate the perfection of this code.