Is there a way to position an absolute positioned element centered to its' parent who is relative positioned?
I was thinking if somehow I can calculate the width of the parent, and based on that, center the child? But not sure where to start whether with JavaScript or css.
Here's the codepen for reference
.tooltip {
/*
position the top-left corner of the element
in the center of the parent
*/
position: absolute;
top: 50%;
left: 50%;
/*
move the (positioned) element up and left
by half its own width/height
*/
transform: translate(-50%, -50%);
}
.container,
.tooltip{
border: 2px solid black;
padding: 10px;
}
.container {
position: relative;
width: 80vw;
height: 50vh;
}<div class="container">
<div class="tooltip">Tooltip</div>
</div>top and left percentages are percentages of that dimension on the of the parentElement.
Whereas the percentages in translate are relative to the element itself.
This should center your tooltip
const tooltip = document.getElementById('tooltip');
const parentWidth = tooltip.parentElement.offsetWidth;
tooltip.style.left = (parentWidth - tooltip.offsetWidth) / 2 + 'px';
Edit: I think Thomas Answer contains the better way
Well it depends on your code if you want to do this css only, Here are several cases I came up with after doing my research:
1. If your div has a set size (width & height), According to this page you can take this steps:
In your case it looks like this:
#container {
border: 1px solid gray;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
padding: 8px;
}
#tooltip {
width: 100px; /* could be set by % aswell */
height: 10px;
border:1px solid green;
position:absolute;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -5px;
bottom: -24px;
}<div id="wrapper">
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
<div id="tooltip">Center</div>
</div>2. If it doesn't contain a set value but you want it to be centered anyway:
Not sure if it's a good way but you can use an absolute element inside wrapper before any other content, covering its parent and having its display value as flex and containing justify-content: center as well as align-items: center;
e.g. on your code:
#container {
border: 1px solid gray;
}
.full-flex{
width: 100%;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
/* padding: 8px; */ /* I removed the padding so you can get a better understanding of this */
}
#tooltip {
border:1px solid green;
}<div id="wrapper">
<div class="full-flex">
<div id="tooltip">Wanna be centered</div>
</div>
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
</div>