我尝试在中垂直居中它（而不是水平居中）。此外，我不想指定高度或任何其他东西。我尝试添加一个具有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>
请查看此处经过编辑的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;
}
padding 或 margins，通过设置 margin: 0; padding: 0; 来移除它们，或者在您的页面中添加 CSS Normalize 以避免未来出现问题。这两个包装器是居中所必需的；如果您不想使用 JavaScript，那么这是唯一的方法。 - Chrisdisplay: table; 的情况下完成它。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！垂直和水平居中的内容div。JSFiddle：https://jsfiddle.net/z0g0htm5/。
主要参考自https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/和https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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>相关文章: 如何在所有浏览器中垂直居中一个div
这在我的情况下有效：
Style.css
div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
您确实可以在不使用包装器的情况下垂直和水平居中单个容器。关键是要理解100％的高度和宽度的含义，它们表示相对于父元素的百分比。您必须将百分比链接到层次结构向上直到实际视口高度和宽度。
HTML 元素 <---> BODY 元素 <----> DIV 元素
在 DIV 中 100% 的高度会查找 BODY 的高度，BODY 再查找 HTML 的高度，HTML 最终查找视口的大小。为了使其正常工作，您不能在 CSS 中组合 HTML 和 BODY，而应分别处理它们。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}<html>
<body>
<div>
Center me!
</div>
</body>
</html>一个带有表格包装的JSFiddle示例
在上述解决方案中，为html和body提供css，并使用"height: 100%"将要居中的表单包装在一个表格中。
代码示例
<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>
CSS： width: 200px; margin: 0 auto;