将绝对定位的div居中在另一个div中

Question

有没有一种方法可以将绝对定位的 div 放在其父元素中心并位于内容上方，同时具有 z-index 属性？

<div id="parent">
    <div id="absolute-centred"></div>
</div>

父元素的大小未知，绝对定位的div应该覆盖在内容上方。

- Verdemis

---

可能是重复的问题：如何在 div 中居中绝对定位的元素？ - yeouuu

Answer 1

YOUR CONTENT HERE

.container {
 position: relative;
 width: 100px; /* not part of solution */
 height: 100px; /* not part of solution */
 background-color: #808; /* not part of solution */
 border-radius: 50%; /* not part of solution */
}
.content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center; /* not part of solution */
}

<div class="container">
    <div class="content">I'm absolutly centered</div>
</div>

你还可以将水平/垂直对齐嵌套到另一个 absolute 定位的 div 中。你的父级 relative 可以是一个 absolute，或者如果您喜欢，可以使用 fixed。

如果你只想要垂直对齐，使用 translateY(-50%)，如果你想要水平对齐，则使用互补的 top 或 left 属性和 translateX(-50%)。

最后，您可以将 50% 更改为任何您想要的内容，以不仅“居中”内容。

- Bruno J. S. Lesieur

---

我稍微快了一点，但因为你的答案带有小提琴，我删掉了我的答案。 - Jonas Grumann

太棒了！非常感谢你。 - Verdemis