Question

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

pp应该以{{1}}和el为中心。我在container div的中间有一个红色标记，用于标记它的中心。

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

如何使用pp将translateX容器集中到任何大小的另一个div。

＆＃13;

.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%);
}

＆＃13;

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>

＆＃13;

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

Answer 1

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

评论是正确的，您必须执行left: 50%和transform: translateX(-50%);。

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

您示例中的部分问题是：

父容器上缺少position: relative。
将父容器设置为30px。为了使这个工作顺利，父母应该采取100％的宽度。
忘记left: 50%和.el规则中的.pp。

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

使用translateX（-50％）将位置绝对元素居中并不会使div

1 个答案: