Search code examples
htmlcssalignmentvertical-alignmentcentering

Vertically centering a div in body?

I have tried to center below code vertically in body (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>
</form>​
Solution

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