center form vertically to the center

Question

I am finalizing a site and the form has to be centered vertically on the page.

I’ve tried everything to have a margin in % but no technique works. I’ve put %, I put like Absolute to top and nothing.

I’ll leave the beta link for you to take a look and give me a light.

http://bblender.com.br/clientes/moldin/contato

Personal code

<section class="container">
   <h2>CONTATO</h2>
       <form id="form-contato" action="contato/send" method="post" name="contato" >     
          <div class="clearfix"></div>
       </form>
          <div class="clearfix"></div>
</section>

.container{
    width: 1024px;
    margin: 0 auto;
    position: relative;
}
#form-contato {color: #58595B;margin-top: 13%;}

Answer 1

look at the following example:

CSS

#container {
    position: absolute;
    background-color: gainsboro;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 5;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

#form-contato {
    width: 100%;
    height: 100px;
    background-color: white;
    box-shadow: 0px 0px 10px black;
    position: absolute;
    margin: auto;    

    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

HTML

<div id="container">
    <h2>CONTATO</h2>
    <form id="form-contato" action="contato/send" method="post" name="contato" >
        <label for="txtTeste" >Teste:</label>
        <input is="txtTeste" type="text" />
    </form>
</div>

JSFIDDLE

http://jsfiddle.net/0nh8ms29/3/

Answer 2

You just need to change a margin rule on your id #form-contato:

#form-contato {
  color: #58595B;
  margin: 13% 0
}

This will make it have a 13% margin at both the bottom and top. Upshot: current | with the change.