Position panel elent in the center. Foundation framework

Hi and thanks in advance for your time,

I'm trying to put a round container with call to action in the middle of the screen. It is not working with margin: auto and the only way is to insert values manually.

My index.html

<section class="main_screen">
   <div class="panel small-4 column bingo Absolute-Center">
        <h3>Корпоративные тренинги по тайм-менеджменту</h3>
        <h4>2-дневный тренинг с последующим сопровождением в работе и гарантией результата</h4>
        <a href="#" class="button success center">Отправить заявку</a>
   </div>
</section>

My css:

.main_screen {
    margin-top: 50px;
    background: url(../images/bg.png) no-repeat center;
    color: blue;
    height: 500px;
}

.bingo {
    left: 32%;
    top: 6%;
    border-radius: 50%;
    height: 450px;
    width: 450px;
    vertical-align: middle;
    text-align: center;
    background: rgba(39, 40, 105, 0.4);
    border-width: 0px;
    color: #333333; }
  .panel > :first-child {
    margin-top: 30%; }
  .panel > :last-child {
   margin-bottom: auto; }
}

Is there more elegant way to code this? The goal is that the element would be in the center no matter of the screen size 768px+. For smaller i will add media querry so the element would be not rounded.