How to center figure with max-width set?

Question

I’m trying to centralize a figure with max-width defined. By centering without the max-width, right. But the background exists in it gets 100% and not centralized together with figure. For that I used the max-width, but while using the figure Line up on the left again. Is there any other way?

<figure id="img-home">
                <img src="img/col-1.jpg" alt="Cotação Individual, Familiar, Empresarial">
                <figcaption>
                    <strong>Cotação</strong>
                    <span><a href="#">Individual</a> | <a href="#">Familiar</a> | <a href="#">Empresarial</a></span>
                </figcaption>
            </figure>

#img-home {background: #eed46f; padding: 5px; max-width: 330px; text-align: center;}

Answer 1

You need to add margin 0 auto; on your tag figure

#img-home {
    margin:0 auto;
    background: #eed46f; 
    padding: 5px; 
    max-width: 330px; 
    text-align: center;
}

Example: Jsfiddle