在另一个 div 中居中绝对 div

Question

有没有办法将绝对 div 放置在他的父级中，并使用 z-index 在内容上方居中？

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

父级的大小未知。绝对 div 应该覆盖内容。

Answer 1

将一个 div 垂直和水平居中到另一个 div 的简单方法如下：

.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%)，如果您想要水平对齐，请使用translateX(-50%) 和互补的top 或left 属性。

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