center form vertically to center

Question

center form vertically to center

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm finalizing a website and the form has to be vertically centered on the page.

I have tried everything to have a margin in% but no technique works. I already bought % , I voted as absolute to top and nothing.

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

link

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%;}

html css

asked by anonymous 04.02.2015 / 15:51

2 answers

Filter table data through checkbox Delete generated table and re-create with other data

score 1 · 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

link

score 0 · Answer 2

You only need to change a margin rule in your% wcc-id:

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

This will cause it to have a 13% margin on both the bottom and top. Result: current | with change .