Hunter Mitchell Hunter Mitchell -4 years ago 128
HTML Question

Vertically centering a div in body?

I have tried to center this vertically in

(not horizontally). Also, I do not want to specify heights or anything like that. I tried adding a wrapper with a 100% height and other things, but got nowhere. Can you please help me fix this?

jsFiddle Here

<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
<input type="text" placeholder="Email"/><br>
<input type="text" placeholder="Username"/><br>
<input type="password" placeholder="Password"/><br>
<button type="submit">Next</button>

Answer Source

See this edited version of your jsFiddle.

Basically, just wrap your content in <div class = "main"><div class = "wrapper"></div></div>, and add the following CSS:

html, body {
    height: 100%;
.main {
    height: 100%;
    width: 100%;
    display: table;
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download