问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在身体中垂直居中一个div？

社区维基
1
新手上路，请多包涵

我试图将其垂直居中 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>​

原文由 Hunter Mitchell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsscentering
阅读 246
2 个回答
得票最新
社区维基
1
✓ 已被采纳

查看 您的 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;
}

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

如果你有 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/

原文由 Rob Waring 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题