如何仅使用 CSS 将绝对元素自动居中在相对父级内？

Posted 2023-03-05

【中文标题】如何仅使用 CSS 将绝对元素自动居中在相对父级内？

【英文标题】：How to automatically center an absolute element inside a relative parent with CSS only?

【发布时间】：2014-02-02 23:46:17

【问题描述】：

我看到有一些关于这个主题的帖子，但没有一个专门回答我的问题

http://jsfiddle.net/27van/ 显示如何将文本水平居中。

我想在父div 中垂直居中，而不使用设置固定像素数的top（虽然我需要它是动态的）

有什么线索吗？

.parent_div 
  position: relative;
  text-align: center;


.child_div 
  position: absolute;
  width: 100%;
  top: 70px;

<div class="parent_div">
  <img src=...></img>
  <div class="child_div">
    <h1>Some Title</h1>
  </div>
</div>

【问题讨论】：

到目前为止你尝试过什么？你的代码是什么样的？目前我们所能提供的只是通用解决方案

编辑了问题以添加我尝试过的内容！

那么你到底想垂直居中什么呢？ h1?

我想将 child_div 居中。如果我添加更多文本，如果我也添加图像，我希望它始终位于 parent_div 的中心。

【参考方案1】：

因为您已为子元素提供 100% 的宽度，所以我猜您希望将其垂直居中对齐...在这种情况下，您需要知道 .child-div 的高度（如果它具有固定高度）那么你可以使用这样的东西：

.parent_div position: relative;

.child-div 
    position: absolute;
    height: 100px; /* for example */
    top: 50%;
    margin-top: -50px /* height divided by 2 */

如果高度未知，那么您可以使用相同的方法，但通过 jQuery 计算高度和边距。如果您想水平对齐它，您可以使用相同的方法，但进行这些更改......在这种情况下，您需要固定宽度。

.child-div 
        position: absolute;
        width: 100px; /* for example */
        left: 50%;
        margin-left: -50px /* width divided by 2 */
    

您更新的fiddle