Ho il seguente codice:

HTML

codice HTML:
<section id="section">
 <aside id="container">
  <p class="centrato">Testo non centrato</p>
 </aside>
</section>
CSS

codice:
#section
{
 width: 96%;
 height: 60%; 
 margin: 0 auto;
}

#container
{

 display: inline-block;
 height: 100%;
 width: 70%;


}

.centrato
{

 padding: 1%;
 width: 50%;
 margin: auto;
 text-align: center;
 vertical-align: middle;


}
Il paragrafo ".centrato" viene centrato all'interno dell'aside "#container" solo orizzontalmente, ma non verticalmente, perché? Qual è la soluzione al problema? (Preferirei che l'altezza rimanesse "su misura" intorno al ".centrato")

Grazie mille in anticipo