中心绝对div在另一个div中

Question

有没有办法将一个绝对div放在他的父级居中，并在z-index的内容之上？

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

父母的身份未知。绝对div应该覆盖内容。

Answer 1

将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。如果您愿意，您的父[{1}}可以是relative或absolute。

如果您只想要垂直对齐，请使用fixed，如果您想要水平对齐，请使用translateY(-50%)和translateX(-50%)或top属性。

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