Thanks to past questions I understood top: -50%
has no effect
for the innermost div in the following example because an explicit height is not set in the parent element.
What I'm curious is why left: -50%
does work even though I did not set an explicit width.
/* Positioning */
.a {
position: relative;
}
.b {
position: absolute;
top: 0;
left: 0;
}
.c {
position: relative;
top: -50%;
left: -50%;
}
/* Visuals */
.a {
background-color: lightpink;
padding: 1rem;
height: 10rem;
margin: 4rem;
}
.b {
background-color: lightgreen;
}
.c {
background-color: lightblue;
padding: 1rem;
}
<div class="a">
<div class="b">
<div class="c">
<p>Some Text</p>
</div>
</div>
</div>