Center absolute div in another div

Question

is there a way to place a absolute div inside his parent centered and above the content with z-index?

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

The size of the parent is unknown. the absolute div should be overlaying the content.

Answer 1

The easy way to vertically and horizontally center a div into another goes like this:

.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>

You could also nest your horizontal/vertical alignment to another absolute positioned div. Your parent relative could be an absolute, or fixed if you prefer.

If you just want vertical align, use translateY(-50%) and if you want horizontal align, use translateX(-50%) with complementary top or left property.

And last, you could change 50% to whatever you want to not only « center » content.