问答博客资讯标签用户活动
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 标记 width 设置为 800 像素。当浏览器宽度大于 800 像素 时，不应拉伸 div ，但应将其置于页面中间。

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

Stack Overflow 翻译csshtmlalignmentcenter
阅读 352
2 个回答
得票最新
社区维基
1
✓ 已被采纳
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

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

社区维基
1

position: absolute 然后 top:50% 和 left:50% 将上边缘放在屏幕的垂直中心，将左边缘放在水平中心，然后添加 margin-top 为 div 高度的负值，即 -100 将其向上移动 100，对于 margin-left 也是如此。这得到了 div 正好在页面的中心。

 #outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}

 <div id="outPopUp"></div>

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

查看全部 2 个回答
推荐问题