Centralizar ul's na div verticalmente.

[Carlos Rocha 4]

Olá, tenho o CSS

 

ul {
list-style: none;    
}
.media, 
.base {    
display: table;
height:180px;
}

.media .siga,
.media .sigaInsta, 
.media .sigaFace,
.media .news,  
.base .duvidas,
.base .formaPagamento, 
.base .atendimento,
.base .googleSecurit {
display: inline-block;
vertical-align:middle;
width:24%;
height:180px;
border:#000 .01px solid;
}

.media .siga{
font-size: 30px;
}

.media .siga ul,
.media .sigaInsta ul,
.media .sigaFace ul,
.media .news ul{
display:block;
margin:0 auto;
vertical-align:middle;
width:100%;
height:120px;
border:#000 .01px solid;
text-align:center;
}

.media .news ul {    
  text-align:left;
}

.base .duvidas ul,
.base .formaPagamento ul, 
.base .atendimento ul,
.base .googleSecurit ul{
display:block;
vertical-align:top;
width:100%;
height:160px;
border: #F3C .01px solid;    
}

.base .duvidas ul li,
.base .formaPagamento ul li, 
.base .atendimento ul li,
.base .googleSecurit ul li{
height:40px;
padding:3px;
}

.base .cabeca {
height:50px;
text-transform:uppercase;
font-weight:bolder;
color:#FFFFFF;
}

E o HTML

<div class="media">
<div class="sessoes">
<div class="siga">
  <ul>
<li>Magic for Baby</li>
<li>Redes Sociais:</li>
  </ul>
</div>
<div class="sigaInsta">
<ul>
<li> <a href="https://www.instagram.com/magicforbaby"> <img src="../_img/_iconesLoja/sigaInsta.png" /> </a> </li>
<li>
  <label>Siganos no Instagram</label>
</li>
</div>
<div class="sigaFace">
  <ul>
<li> <a href="https://www.facebook.com/magicforbaby"> <img src="../_img/_iconesLoja/sigaFace.png" /> </a> </li>
<li>
  <label>Curta nossa fanpage</label>
</li>
  </ul>
</div>
<div class="news">
  <ul>
<li>
  <form class="enviaNews">
    <label>Receba nossas ofertas:</label>
    <input type="text" required id="nomeNews"  placeholder="Digite seu nome" />
    <input type="text" required id="emailNews" placeholder="Digite seu e-mail" />
    <button id="recebaNews">Enviar</button>
  </form>
</li>
  </ul>
</div>
</div>
</div>
<div class="base">
  <div class="sessoes">
<div class="duvidas">
  <ul>
    <li class="cabeca">TEM ALGUMA DÚVIDA?</li>
    <li>Dúvidas Frequentes (FAC)</li>
    <li>Como comprar?</li>
  </ul>
</div>
<div class="formaPagamento">
  <ul>
    <li class="cabeca">FORMAS DE PAGAMENTO</li>
    <li><a href="https://pagseguro.uol.com.br"><img src="../_img/pagSeguro.png" /></a></li>
  </ul>
</div>
<div class="atendimento">
  <ul>
    <li class="cabeca">FALE CONOSCO</li>
    <li><a href="mailto:contato@magicforbaby.com.br">contato@magicforbaby.com.br</a></li>
    <li>(32) 37 21460.3</li>
  </ul>
</div>
<div class="googleSecurit">
  <ul>
    <li class="cabeca">SEGURANÇA</li>
    <li>Compre Seguro</li>
    <li><a href="https://www.google.com/transparencyreport/safebrowsing/diagnostic/index.html#url=www.magicforbaby.com.br"><img src="../_img/_iconesLoja/gSecurit.png" /></a></li>
  </ul>
</div>
  </div>
</div>

 

Que podem ser vistos em:

http://magicforbaby.com.br/loja/

Que são as penultimas div's, a cinza e a preta no final da página.

Não estou conseguindo fazer 

  vertical-align = middle;

nos blocos.

A ideia é fazer com que todos os blocos internos, a saber, as ul's, centralizadas verticalmente em ralação à sua div mãe.

Grato a quem puder ajudar!

[bruno1234 19]

Experimenta assim:

.media .siga, ... {
  position: relative; 
}

.media .siga ul {
...
margin: auto;
position: absolute;
top: 0;
bottom: 0;
...
}

Depois, é só ajustares como queres.