中心絕對div在另一個div

Question

有沒有辦法將絕對div放在他父母的中心位置和z-index內容之上？

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

父母的大小是未知的。絕對div應該覆蓋內容。

Answer 1

最簡單的方式垂直和水平居中一個div到另一個是這樣的：

.container { 
 
\t position: relative; 
 
\t width: 100px; /* not part of solution */ 
 
\t height: 100px; /* not part of solution */ 
 
\t background-color: #808; /* not part of solution */ 
 
\t border-radius: 50%; /* not part of solution */ 
 
} 
 
.content { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t 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％更改爲您想要的任何內容，而不僅僅是「中心」內容。