28

我试图将其垂直居中body（而不是水平）。另外，我不想指定高度或类似的东西。我尝试添加一个高度为 100% 的包装器和其他东西，但一无所获。你能帮我解决这个问题吗？

jsFiddle在这里

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

5 回答 5

55

请参阅您的 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;
}
于 2012-10-07T19:27:03.513 回答
13

如果你有可用的 flexbox，你可以不使用display: 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>

达达！垂直和水平居中的内容 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/

于 2016-11-29T14:27:45.130 回答
12
于 2017-09-23T01:41:33.000 回答
1

这对我有用：

样式.css

div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

我在这里找到了这个代码片段。

于 2016-08-25T01:32:37.000 回答
0

带有表格扭曲的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>

​</p>

于 2012-10-07T19:26:38.267 回答