title: How to centre/center html audio player to middle of webpage?
body: <h1> Problem </h1>
  
  <p><strong>I have been trying to centre/center my HTML audio player to be in the centre/center of my GitHub Pages static website.</strong> 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. </p>
  
  <h1> Code Snippet </h1>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1> Attempts so far</h1>
  
  <h2> Attempt #1 - create a 'center' class and apply inline </h2>
  
  <p>Top of code (in style tags): </p>
  
  <pre><code>  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  </code></pre>
  
  <p>Bottom of code: <code>&lt;source src="etc.mp3" type="audio/mpeg" class="center"/&gt;</code></p>
  
  <h2> Attempt #2 - add id tag to audio player and align text to center </h2>
  
  <p>Top of code (in style tags) :   </p>
  
  <pre><code>#audio {
      text-align: center;
    }
  </code></pre>
  
  <p>Bottom of code:  <code>&lt;source id="audio" src="etc.mp3" type="audio/mpeg"/&gt;</code></p>
  
  <h2> Attempt #3 - add div tags around audio player and align text to center </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>  #audio {
      text-align: center;
    }
  </code></pre>
  
  <p>Bottom of code: </p>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #4 - vertically align text to center </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>  #audio {
      vertical-align: center;
    }
  </code></pre>
  
  <p>Bottom of code:</p>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #5 - justify content to center </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>#audio {
      justify-content: center;
    }
  </code></pre>
  
  <p>Bottom of code: </p>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #6 - align self to center </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>#audio {
      align-self: center;
    }
  </code></pre>
  
  <p>Bottom of code:</p>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #7 - display audio player as inline block </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>  #audio {
      align-self: center;
       display: inline-block;
    }
  </code></pre>
  
  <p>Bottom of code:</p>
  
  <pre><code>&lt;div class="audio"&gt;
     &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
     &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #8 - wrapping the audio player in a table </h2>
  
  <pre><code>  &lt;div style="margin: 0 auto; display: table;"&gt;
      &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
      &lt;/audio&gt;
    &lt;/div&gt;
  </code></pre>
  
  <h2> Attempt #9 - adding an audio container class and applying it inline </h2>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code>.audio-container {
    display: flex;
    justify-content: center;
    align-items: center 
  }
  </code></pre>
  
  <p>Bottom of code:</p>
  
  <pre><code>  &lt;div class='audio-container'&gt;
      &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
      &lt;/audio&gt;
    &lt;/div&gt;
  </code></pre>
  
  <h1> What I haven't attempted </h1>
  
  <ul>
  <li>Adding so much padding that the audio player ends up in the centre/center of the page</li>
  </ul>
  
  <h1> Sources of research </h1>
  
  <ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" rel="nofollow noreferrer">MDN</a></li>
  <li>A generous number of StackOverflow threads</li>
  <li>W3C docs</li>
  </ul>
  
  <h1> Solution - *IMPORTANT!* Updated 13/03/2019 </h1>
  
  <p>From Sandip Nirmal's answer in <a href="https://stackoverflow.com/questions/16823868/center-html-5-audio-players-for-all-browsers">this thread</a> - also attempt #9 after deleting cache</p>
  
  <p>Top of code (in style tags):</p>
  
  <pre><code> .audio-container {
    display: flex;
    justify-content: center;
    align-items: center 
  }
  </code></pre>
  
  <p>Bottom of code:</p>
  
  <pre><code>  &lt;div class="audio-container"&gt;
      &lt;audio controls&gt;
        &lt;source src="etc.mp3" type="audio/mpeg"/&gt;
      &lt;/audio&gt;
    &lt;/div&gt;
  </code></pre>