问答博客资讯标签用户活动
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 （带有 position:absolute; ）元素。但我这样做有问题，因为 宽度是未知 的。

我尝试了下面的 CSS 代码，但它需要调整，因为 宽度 是响应式的。

 .center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点？

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

Stack Overflow 翻译csscss-positioncenterabsolute
阅读 598
2 个回答
得票最新
社区维基
1
✓ 已被采纳
<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

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

社区维基
1

这对我有用：

 #content {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* Need a specific value to work */
}

 <body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

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