当孩子绝对定位时，将孩子居中到父母[重复]

Question

有没有办法将absolute 定位元素定位到其父级的中心，该父级是relative 定位的？

我在想是否可以通过某种方式计算父项的宽度，并以此为基础将子项居中？但不知道从哪里开始是使用 JavaScript 还是 css。

这是codepen 供参考

Answer 1

这应该使您的工具提示居中

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

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

Answer 2

编辑：我认为Thomas Answer 包含更好的方法

如果你想只使用css，这取决于你的代码，以下是我在研究后提出的几个案例：

1. 如果您的 div 有固定的尺寸（宽度和高度），根据this page，您可以采取以下步骤：

• 将 left: 50% 添加到要居中的元素。你会注意到 这将子元素的左边缘与 50% 线对齐 父母的。
• 添加一个负的左边距，等于宽度的一半 元素。这让我们回到了中途。
• 接下来，我们将对垂直轴进行类似的处理。添加顶部：50% 给孩子
• 然后添加一个负上边距，等于其高度的一半。

在你的情况下，它看起来像这样：

#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. 如果它不包含设置值但您希望它无论如何都居中： 不确定这是否是一个好方法，但您可以在任何其他内容之前在wrapper 中使用绝对元素，覆盖其父元素并将其display 值作为flex 并包含justify-content: center 以及align-items: center; 例如在您的代码上：

#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 3

.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 和 left 百分比是父元素上该维度的百分比。

而translate 中的百分比是相对于元素本身的。

Answer 4

您可以将left/right 定位与transform:translateX 一起使用，以便将元素放在其父元素的中心。我使用您的 codepen 示例在下面制作了 sn-p：

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