How to horizontally center a floating element of a variable width?

Question

How to horizontally center a floating element of a variable width?

Edit: I already have this working using a containing div for the floating element and

Answer 1

This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }