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

Question

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

pp应居中el和container。我在ppdiv 的中间有一个红色标记来标记它的中心。

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

我如何始终使用 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>

小提琴：https://jsfiddle.net/v6o5z8a0/

Answer 1

所以我稍微

更改了一下代码，看看它在做什么。

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

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

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

• 父容器上缺少position: relative。
• 将父容器设置为 30px。为了使这很好地工作，父级应该采用 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>