Horizontally align an html5 audio element in a div

Question

I got this simple div:

#div-2 {
    margin-left: auto;
    margin-right: auto;
}

and an html5 audio element in the body of my page:

<div ID="div-2">
        <audio id="a1" src="../../audio/sound_files/mystuff.ogg"></audio>
</div>

I would like the audio element (that is, the audio controls displayed to the user) to be horizontally centered in the div. Please note I can't specify a width attribute for the audio controls or the audio elements (I tried, did nothing), and as a general rule I don't know the audio controls width (in pixels) between browsers (so I can't adjust the width attribute in the div).

Is there a way to do this either in CSS or, alternatively, in Javascript? It would be a bonus if someone could point me to a relevant resource on the web.

Solution

#div-2 {
    display: table;
    margin: 0 auto;
}

Also if you are using the browser audio controls then remember to add controls to the tag, like so:

<audio id="a1" src="../../audio/sound_files/mystuff.ogg" controls></audio>