Oi Erickson, tudo bom?

Primeiramente, se você já está definindo o width do seu <img> no css, não há necessidade de fazer também no html:

    <img src="n.jpg" id="css"/>

Se você quer que o bloco <img> + <figcaption> fique centralizado, precisamos selecionar alguém que possua ambos. No nosso caso, pode ser a propria tag <figure>. Entretanto, é preferivel trabalhar com classes, caso surjam outras <figure> teremos como diferenciar:

<figure class="classeDaPrimeiraFigure"> 
    <img src="n.jpg" width="350px" id="css"/> 
    <figcaption>testando css3
    </figcaption>
</figure>

Agora podemos buscar pela classe "classeDaPrimeiraFigure" ou pela tag figure e alinhar ao centro lá no nosso arquivo css:

figure #css{
    text-align: center;    
    background-color:white;
    width:400px;
    text-align:center;
    padding:15px;
    font-family:'Comic Sans MS',cursive;
    border:1px solid black;
    box-shadow:5px 5px 3px rgba(0,0,0,0.7);
    -moz-transform:rotate(-5deg);
}
.classeDaPrimeiraFigure{
    text-align: center;
}

Dessa forma, tanto a figure quanto a caption estarão centralizadas no meio.

Quanto ao box-shadow, se você quer que o efeito seja aplicado no conjunto, tente aplicar na div:

<div class="primeiraDiv">
<figure> 
// resto do html

No css:

//resto do arquivo
.primeiraDiv{
          box-shadow:5px 5px 3px rgba(0,0,0,0.7);
}

Segue código emulado: https://jsfiddle.net/dsjk3r2m/

Espero ter ajudado de alguma forma =)

Vlw!! Mexi tanto no código que nem reparei que coloquei width 2x! ><