Center Child to Parent When Child is Absolute Positioned

Question

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

Answer 1

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

Answer 2

This should center your tooltip

const tooltip = document.getElementById('tooltip');
const parentWidth = tooltip.parentElement.offsetWidth;

tooltip.style.left = (parentWidth - tooltip.offsetWidth) / 2  + 'px';

Answer 3

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:

• Add left: 50% to the element that you want to center. You will notice that this aligns the left edge of the child element with the 50% line of the parent.
• Add a negative left margin that is equal to half the width of the element. This moves us back onto the halfway mark.
• Next, we’ll do a similar process for the vertical axis. Add top: 50% to the child
• And then add a negative top margin equal to half its height.

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>

Answer 4

You can use left/right positioning with transform:translateX in order to put element in the center of it's parent. I've made below snippet by using your codepen example:

#container {
  border: 1px solid gray;
}

#wrapper {
  display: inline-block;
  position: relative;
  height: fit-content;
  border: 1px solid red;
  padding: 8px;
}

#tooltip {
  border:1px solid green;
  position:absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* to prevent break the text*/
}

<div id="wrapper">
  Trigger Content, Trigger Content, Trigger Content,Trigger Content,
  <div id="tooltip">I want to be a centered to my parent</div>
</div>