垂直居中在身体的一个div？ [英] Vertically centering a div in body?

问题描述

我尝试在 body （不是水平）中垂直居中。此外，我不想指定高度或类似的东西。我尝试添加一个100％高度的包装和其他东西，但没有地方。你能帮我解决这个问题吗？

I have tried to center this 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>​

推荐答案

您的jsFiddle的此编辑版本。

基本上，只是包装你的在< div class =main>< div class =wrapper>< / div>< / div> 中添加以下内容CSS：

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

这篇关于垂直居中在身体的一个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！