[SOLUCIONADO] Centrar un div con etiqueta audio dentro.

[nanotime]

Estoy maquetando una pagina y tratando de hacerla responsiva a medida que avanzo (aun sin usar ningun framework) todo en blanco y negro, sin locuras, solo para ideas. La cosa es que la pagina debe llevar un reproductor (que luego haré con mas cuidado con algo de JS), ya lo tengo implementado, es simple, pero ahora necesito posicionarlo en el centro debajo de otros elementos, he probado varios trucos pero ninguno funciona y el que medio funciona (que de hecho no lo hace bien) hace que todo se mueva de su lugar.

El código es teste:

Código HTML:

<section class="base">
        <div class="div-contenedor">
            <div id="banner"></div>
            <br><br>
            <div id="disco">
                <p id="letra">m</p>
                <p id="disco2"></p>
            </div>
            <div id="reproductor">
                <audio controls>
                    <source src="musica/01_Pista.mp3" type="audio/mpeg">
                    <source src="musica/01_Pista.ogg" type="audio/ogg">
                    <embed src="musica/01_Pista.mp3" type="audio/mpeg" height="50" width="100">
                </audio>
            </div>
        </div>
    </section>
 

El CSS que llevo es este:

https://gist.github.com/nanotime/5016223

Gracias por la ayuda de antemano.

[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?

[nanotime]

Lo saqué porque nada de lo que intenté funcionó. Desde el margin: 0 auto hasta tratar con paddings...

Edito ya pude resolverlo, perdón por las molestias.