Html 在身体中垂直居中一个div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12771982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically centering a div in body?
提问by Hunter Mitchell
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?
我试图将其垂直居中body（而不是水平居中）。另外，我不想指定高度或类似的东西。我尝试添加一个高度为 100% 的包装器和其他东西，但一无所获。你能帮我解决这个问题吗？
<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>?
回答by Chris
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:
基本上，只需将您的内容包装在 中<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;
}
回答by antelove
Update: codesandbox.io
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}<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>?Related: Center a div in body
相关：将 div 居中
回答by Rob Waring
If you have flexbox available, you can do it without using display: table;
如果你有 flexbox 可用，你可以不使用 display: table;
Code example:
代码示例：
html,
body {
height: 100%;
width: 100%;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}<html>
<body>
<div class="container">
<div class="content">
This div will be centered
</div>
</div>
</body>
</html>Ta-da! Vertically and horizontally centered content div. JSFiddle: https://jsfiddle.net/z0g0htm5/.
达达！垂直和水平居中的内容 div。JSFiddle：https://jsfiddle.net/z0g0htm5/ 。
Taken mostly from https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/and https://css-tricks.com/snippets/css/a-guide-to-flexbox/
主要来自https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/和https://css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by SeppeDek
回答by bhatanant2
A JSFiddleexample with table warp
甲的jsfiddle例如具有表经线
In the above solution, Provide css for html & body with "height: 100%"and then wrap the form that to be centered around a table.
在上面的解决方案中，为 html 和 body 提供 css "height: 100%"，然后将要以表格为中心的表单包装起来。
Code sample
代码示例
<html>
<body>
<table height="100%" width="100%" border="1">
<tr>
<td>
<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>
</td>
</tr>
</table>
</body>
</html>
?
?
