Centrar un div con etiqueta audio dentro.

[C2am]

Dentro del css que pones no veo nada que declare estilos para "#reproductor":

Código CSS:

.circ{
   width: 10px;
   height: 10px;
   background: black;  
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   text-align: center;
}
 
.div-contenedor{
   padding: 10em 1em;
}
 
.navbar > ul{
   list-style: none;
   float: right;
}
 
#btn1:hover{
   width: 30px;
   height: 30px;
   border: 1px solid;
   background: none;
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   text-align: center;
}
 
#btn2:hover{
   width: 30px;
   height: 30px;
   border: 1px solid blue;
   background: none;
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   text-align: center;
}
 
#btn3:hover{
   width: 30px;
   height: 30px;
   border: 1px solid red;
   background: none;
    -webkit-border-radius: 70px; 
    border-radius: 70px;
    text-align: center;
}
 
#banner{
    border: 1px solid black;
    border-radius: 1em;
    height: 100px;
    width: 50%;
    margin: 0 auto;
 
}
 
#disco{
   -webkit-animation: 2s rotar;
   -o-animation: 2s rotar;
   animation: 2s rotar;
   -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite;
   -o-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   width: 140px;
   height: 140px;
   border: 1px solid black;  
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 0 auto;
}
 
#disco2{
   width: 20px;
   height: 20px;
   border: 1px solid black;  
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 25px auto;
}
 
#twitter{
   width: 50px; 
   height: 50px; 
   border: 1px solid black; 
}
 
#facebook{
   width: 50px; 
   height: 50px; 
   border: 1px solid black; 
}
 
#letra{
   text-align: center;
}
 
#social > ul li{
   float: left;
   margin-right: 30px;
   list-style: none;}
 

Tal vez no es el css completo?