html - 使用 translateX(-50%) 将位置绝对元素居中不会使 div 居中

Question

我有一个 container，里面有两个元素，el 和一个绝对定位的元素 pp。 el 与 container 共享相同的宽度和高度，并且它们的宽度可以动态更改。

pp 应该以 el 和 container 为中心。我在 pp div 的中间有一个红色标记来标记它的中心。

container 和 el 的宽度为 30px，以居中 pp 我使用的 translateX(-50%)。根据我的理解，这应该使 pp 居中到 el。但实际结果并非如此。 -50% 将 div 向左移动一点。调整 -43% 时，红色标记居中。但是这个 -43% 不适用于另一个宽度不同的 el div。

如何始终使用 translateX 将 pp 容器置于任意大小的另一个 div 中。

.container {
     width: 30px;
     margin: 0 auto;
}
 .el {
     width: 30px;
     height: 30px;
     background-color: pink;
     border-radius: 100%;
}
 .pp {
     position: absolute;
     max-width: 300px;
     background-color: yellow;
}
 .pp1 {
     transform: translateX(-50%);
}
 .pp2 {
     transform: translateX(-43%);
}

Not centered when translateX is -50%
<br />
<br />
<div class="container">
   <div class="el">
      elem
   </div>
   <div class="pp pp1">
      <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
      popoverasdasd asjdjasd sdfsdfsdfsdf
   </div>
</div>
<br />
<br />
<br />
<br />
Expected result comes when translateX is -43%
<br />
<br />
<div class="container">
   <div class="el">
      elem
   </div>
   <div class="pp pp2">
      <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
      popoverasdasd asjdjasd sdfsdfsdfsdf
   </div>
</div>

fiddle :https://jsfiddle.net/v6o5z8a0/

Answer 1

所以我稍微更改了代码以查看它在做什么。

评论是正确的，你必须做一个left: 50%和一个transform: translateX(-50%);。

left:50% 会将内部元素的左侧移动到父元素的中间。而 transform: translateX(-50%); 会将内部元素向后移动其宽度的 50%。这将使对象在父对象中居中。

您的示例中的部分问题是:

• 父容器上缺少position: relative。
• 将父容器设置为 30 像素。为了使其正常工作，父级应采用 100% 的宽度。
• 忘记 .el 和 .pp 规则中的 left: 50%。

.container {
  height: 80px;
  outline: 1px dashed red;
  position: relative;
}

.el {
  background-color: pink;
  border-radius: 100%;
  height: 30px;
  left: 50%;
  outline: 1px dashed blue;
  position: absolute;
  transform: translateX(-50%);
  width: 30px;
}

.pp {
  bottom: 0;
  position: absolute;
  left: 50%;
  max-width: 300px;
  background-color: yellow;
}

.pp1 {
  transform: translateX(-50%);
}

.pp2 {
  transform: translateX(-43%);
}

Not centered when translateX is -50%
<br />
<br />
<div class="container">
   <div class="el">
      elem
   </div>
   <div class="pp pp1">
      <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
      popoverasdasd asjdjasd sdfsdfsdfsdf
   </div>
</div>
<br />
<br />
<br />
<br />
Expected result comes when translateX is -43%
<br />
<br />
<div class="container">
   <div class="el">
      elem
   </div>
   <div class="pp pp2">
      <div style="width:10px; height: 10px; margin: 0 auto; background-color: red;"></div>
      popoverasdasd asjdjasd sdfsdfsdfsdf
   </div>
</div>