title: How can i center a Audio Player?
body: <p>how can i center the audio player?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          #playlist{
              list-style: none;
          }
          #playlist li a{
              color:white;
              text-decoration: none;
          }
          #playlist .current-song a{
              color:blue;
          }
          body {background-color: black;}
          h1 {color: white;}
          p {color: white;}
      &lt;/style&gt;
      &lt;link rel="shortcut icon" type="image/ico" href="/img/favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;audio src="" controls autoplay id="audioPlayer"&gt;
          Sorry, your Browser doesn't Support HTML5!
      &lt;/audio&gt;
      &lt;ul id="playlist"&gt;
          &lt;li class="current-song"&gt;&lt;a href="/music/song1.mp3"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/music/song2.mp3"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- &lt;p&gt;Back to &lt;a href="https://URL/"&gt;URL&lt;/a&gt;&lt;/p&gt; --&gt;
      &lt;script src="https://code.jquery.com/tt.js"&gt;&lt;/script&gt;
      &lt;script src="audioPlayer.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          audioPlayer();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is what i have so far: <a href="https://prnt.sc/r4o3nh" rel="nofollow noreferrer">https://prnt.sc/r4o3nh</a>
  And this is what i want: <a href="https://prnt.sc/r4o3en" rel="nofollow noreferrer">https://prnt.sc/r4o3en</a></p>
  
  <p>What i tried: 
  style="display: block; margin: 0 auto;
  style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900"</p>