Alex Rivera | Logout

Vertically centering a div in body?

Asked 2012-10-07T19:16:13.160
32

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>​
html css alignment vertical-alignment centering
Edit
Report

1 Answer

62

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;
}
answered 2012-10-07T19:27:03.513

Your Answer