Center HTML 5 Audio Players for All Browsers

Question

I tried code like this:

<div style="margin: 0 auto;">
   <audio controls ....>
       ....
   </audio>
</div>

but this will not center the audio player because the div will expand to take up all available space. Is there a good way to center the audio player on EVERY browser without breaking it?

Answer 1

Try using flexbox with something like the following:

# HTML    
<div class='audio-container'>
   <audio controls>
   </audio>
</div>

#CSS
.audio-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

You can check it here https://jsbin.com/tojidar/edit?html,css,output

This should work fine on all the modern browsers.

Answer 2

Style the audio element to display: block; margin 0 auto;. No need for a wrapper. Like this:

<div>
    <audio controls style="margin: 0 auto; display: block;"></audio>
</div>