问答博客资讯标签用户活动
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
新手上路，请多包涵

我想在屏幕中心放置一个 <div> （或一个 <table> ）元素，而不管屏幕大小。换句话说，“顶部”和“底部”的空间应该相等，“右侧”和“左侧”的空间应该相等。我想只用 CSS 来完成这个。

我尝试了以下方法，但它不起作用：

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

笔记：

如果 <div> 元素（或 <table> ）随网站滚动，无论哪种方式都可以。只是希望它在页面加载时居中。

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

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

简单的方法，如果你有一个固定的宽度和高度：

 #divElement{
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -50px;
 margin-left: -50px;
 width: 100px;
 height: 100px;
 }​

请不要使用内联样式！这是一个工作示例 http://jsfiddle.net/S5bKq/ 。

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

社区维基
1

随着现在越来越普遍地支持转换，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

简单！ JSFiddle 在这里：http: //jsfiddle.net/LgSZV/

更新： 查看 https://css-tricks.com/centering-css-complete-guide/ 以获得关于 CSS 居中的相当详尽的指南。将其添加到此答案中，因为它似乎吸引了很多眼球。

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

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