Center a form vertically

Question

I have the following screen and I can’t vertically center this form below on the screen. I define how position: absolute; and I add the top:20% and does not move!

Follows my html:

<header>
    <div class="local">
        <img src="images/local_bg.png" alt="Caminho Default">
        <span>Enviar arquivo</span>
    </div>  

    <div class="info">
        <img src="images/user_ico.png" alt="Icone de usuário" class="user_ico">
        <span class="userName">Luítame de Oliveira</span>
        <img src="images/down_ico.png" alt="Icone de seta" class="info_btn">
    </div>
</header>

<div class="content">

    <form class="form_envia" method="post" action="#">

        <input type="file">

        <label>
            <input name="processo" class="processo" type="text">
        </label> 

        <label>
            <select name="categoria">
                <option value="">Categoria</option>
                <option value="">DRAFT</option>
                <option value="">DRAFT</option>
                <option value="">DRAFT</option>
                <option value="">DRAFT</option>
            </select>
            <input type="checkbox" name="notCat"><span>Outra Categoria</span>
        </label>

        <label>
            <select name="tipo">
                <option value="">Tipo</option>
                <option value="">Importação</option>
                <option value="">Exportação</option>
            </select>
        </label>

        <label>
            <input name="importador" class="importador" type="text">
        </label>
        <label>
            <input name="exportador" class="exportador" type="text">
        </label>

        <label>
            <input name="navio" class="navio" type="text">
        </label>

        <label>
            <select name="semana">
                <option value="">Semana</option>
                <?php 
                    for ($i=1; $i <=52 ; $i++) { 
                        echo "<option value=".$i.">$i</option>";
                    }
                ?>
            </select>

            <input name="data" class="data" type="text">
        </label>

        <input name="btn_envia" class="btn_envia" value="Enviar Arquivo" type="submit">

    </form>
</div>

    <?php include_once "../footer.php"; ?>

The CSS that formats everything is this:

    *{padding: 0; 
      margin: 0;
      outline: none;
      font-family: 'Roboto', sans-serif; 
      }

    header{background: #75FF75; 
           height: 30px; 
           width: 100%;
           }

    header .local{float: left;}

    header img{height: 30px; 
               float: left; 
               margin-left: 5px;
               }

    header span{float: left; 
                font-family: 'Roboto', sans-serif; 
                font-weight: 900; 
                font-style: italic;
                font-size: 12px;
                color: #333;
                text-shadow: 0px 0px 1px #ccc;
                margin: 7px 0 0 5px;
                }

    header .info{float: right; 
                 background: white; 
                 height: 24px; 
                 margin: 3px 10px 3px 0;
                 }          

    header .info .user_ico{width: 20px; height: 19px; float: left; margin-top: 2px;}

    header .info .userName{color: #088508; font-style: normal; font-weight: 300;}

    header .info .info_btn{width: 12px; height: 11px; float: right; margin-top: 8px;         margin-right: 5px;}

    .content{width: 1100px; 
             float: left; 
             position: relative; 
             left: 9.7%; 
             }

    .content .upload_file{font-style: italic; 
                          font-weight: 500; 
                          font-size: 15px; 
                          text-decoration: none; 
                          text-shadow: 0 0 1px #333;
                          background: #006600;
                          color: white;
                          padding: 10px 20px;
                          margin: 5px;
                          float: right;
                          display: block;
                          }

    .content .upload_file:hover{background: #37FF37; color: #006600; text-shadow: none;}                  

    .content .upload_off{background: #bdc3c7; 
                         color: rgba(255, 255, 255, 0.75); 
                         text-shadow: none;
                         font-style: italic;
                         font-weight: 500; 
                         font-size: 15px; 
                         text-decoration: none; 
                         padding: 10px 20px;
                         margin: 5px;
                         float: right;
                         display: block;
                         cursor: default;
                         }

    .content .filtro{float: left; 
                     background: #00CC00; 
                     font-style: italic; 
                     font-size: 15px; 
                     color: white;
                     padding: 15px;
                     margin: 53px 0 0 0;
                     }

    .content .filtro span{display: block;}

    .content .filtro .btn_busca{background: #006600; 
                                color: white; 
                                float: left;
                                border: none;
                                width: 98%;
                                border: 2px solid #006600;
                                }

    .content .filtro .btn_busca:hover{background: #009500; color: white; border: 2px solid #009500;}                            

    input, select{font-size: 15px; padding: 2px; margin: 5px;}                          

    label{display: block;
          }

    strong{font-weight: normal; 
           font-size: 14px;
           }

    /*Formatando tabela*/
    th{font-weight: normal;}

    table{float: right; width: 820px; margin: 2px 0 0 0; cursor: default;}

    table tbody{color: #333;}

    table tbody tr td{padding: 3px;}

    table tbody tr:hover{background: #37FF37}

    /*Paginador*/
    .paginador{float: right; margin: 10px 0 0 700px;}

    .paginador a{font-size: 13px; text-decoration: none; border: 1px solid #006600; color: #006600; padding: 3px;}

    .paginador a:hover{background: #006600; color: white;}

    .paginador .separator{margin: 0 5px;}

    /*Rodapé*/
    footer{height: 50px; 
           width: 99.99%; 
           background: #006600;
           float: left;
           margin: 20px 0 0 0;
           position: absolute;
           bottom: 0;
           }

    footer p, .footerPrincipal p{font-size: 13px; 
                                 color: #fff; 
                                 text-align: center;
                                 font-weight: lighter;
                                 text-shadow: 1px 1px 5px #333; 
                                 padding-top: 16px;
                                 }  

    .footerPrincipal{height: 50px; 
                     width: 99.99%; 
                     background: #006600;
                     float: left;
                     margin: 20px 0 0 0;
                     }

    /*Campos do filtro na tela principal*/         
    .idProcesso{width: 60px; 
                text-align: center;
                }

    .cliente{width: 190px;}

    .data{width: 80px; text-align: center;}

    /*Pagina Envia*/
    .form_edita{background: #EDEFF1; 
                float: left; 
                padding: 30px 100px;
                position: absolute;
                top: 10%;
                /*left: 20.8%;*/
                left: 30%;
                }

    .form_envia{background: #EDEFF1; 
                padding: 30px 100px;
                position: absolute;
                top: 10%;
                left: 20.8%;
                }           

    input, select{border: 2px solid #bdc3c7; 
                  border-radius: 5px; 
                  font-size: 15px; 
                  padding: 8px 12px; 
                  color: #006600
                  }

    input:focus{border: 2px solid #1abc9c;}

    .btn_envia{display: block; 
                           background: #006600; 
                           border: none; 
                               width: 100%; 
                           color: white;
                           text-shadow: 0 0 1px #333;
                           }

    .btn_envia:hover{background: #00A400;}                     

I can’t see where what’s causing it.

Answer 1

jsfiddle (fullscreen)

you can make the following changes:

Put the form inside a div with the class "area"

<div class="area"></div>

and use display as table.

body, html {
    height:100%;
}

.content {
    display: table;
    margin: 0 auto;
    height: 100%;
}

.area {
    display: table-cell;
    vertical-align: middle;
    height:100%;
}
.form_envia {
    background: #EDEFF1;
    padding: 30px 100px;
    width: 336px;
    height: 395px;
}

Answer 2

Explain the top in pixels, not in %, that should work:

.form_envia {
    background: #EDEFF1; 
    padding: 30px 100px;
    position: absolute;
    top: 10px;
    left: 20px;
}  

Answer 3

In class '.content' put 'top:20%;', this will help.

    .content{
         width: 1100px; 
         float: left; 
         position: relative; 
         left: 9.7%;
         top:20%;
         }

Answer 4

put the form within a new div.

<div class="nova">
   <!--aqui vai seu html-->
</div>

<style type="text/css">
     .nova{width:800px;height:auto;margin: 0 auto;}
</style>

Be happy!

Answer 5

In the div that contains the form, add:

margin:50px auto;

On the top bar, add:

top:0;
position:fixed;
left:0;
right:0;
width:100%;