How to centre/center html audio player to middle of webpage?

Question

Problem

I have been trying to centre/center my HTML audio player to be in the centre/center of my GitHub Pages static website. I have tried this in HTML and CSS. I have deleted my cache a few times to make sure that isn't the root of my problems. Chrome Browser / Mac OS 10.14.

Code Snippet

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempts so far

Attempt #1 - create a 'center' class and apply inline

Top of code (in style tags):

  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Bottom of code: <source src="etc.mp3" type="audio/mpeg" class="center"/>

Attempt #2 - add id tag to audio player and align text to center

Top of code (in style tags) :

#audio {
    text-align: center;
  }

Bottom of code: <source id="audio" src="etc.mp3" type="audio/mpeg"/>

Attempt #3 - add div tags around audio player and align text to center

Top of code (in style tags):

  #audio {
    text-align: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #4 - vertically align text to center

Top of code (in style tags):

  #audio {
    vertical-align: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #5 - justify content to center

Top of code (in style tags):

#audio {
    justify-content: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #6 - align self to center

Top of code (in style tags):

#audio {
    align-self: center;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #7 - display audio player as inline block

Top of code (in style tags):

  #audio {
    align-self: center;
     display: inline-block;
  }

Bottom of code:

<div class="audio">
   <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
   </audio>
</div>

Attempt #8 - wrapping the audio player in a table

  <div style="margin: 0 auto; display: table;">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

Attempt #9 - adding an audio container class and applying it inline

Top of code (in style tags):

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

Bottom of code:

  <div class='audio-container'>
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

What I haven't attempted

• Adding so much padding that the audio player ends up in the centre/center of the page

Sources of research

• MDN
• A generous number of StackOverflow threads
• W3C docs

Solution - *IMPORTANT!* Updated 13/03/2019

From Sandip Nirmal's answer in this thread - also attempt #9 after deleting cache

Top of code (in style tags):

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

Bottom of code:

  <div class="audio-container">
    <audio controls>
      <source src="etc.mp3" type="audio/mpeg"/>
    </audio>
  </div>

Answer 1

Try with the css like this:

.audio{
  width:100%;
}
.audio audio{
  margin: 0 auto;
  display: table;
}

The "display: table;" is what does the trick.