html - 在 body 中垂直居中一个div？

Question

我试图在 body 中垂直居中(而不是水平居中)。另外，我不想指定高度或类似的东西。我尝试添加一个 100% 高度的包装器和其他东西，但没有成功。你能帮我解决这个问题吗？

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>​

Answer 1

参见 this edited version of your jsFiddle .

基本上，只需将您的内容包装在 <div class = "main"><div class = "wrapper"></div></div> 中即可，并添加以下 CSS:

html, body {
    height: 100%;
}
.main {
    height: 100%;
    width: 100%;
    display: table;
}
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}