css - 将可变宽度的 div 定位在它的中点

Question

给定一个水平偏移量 (z)，我想将可变宽度 div 水平移动到该偏移量的中点，而不是最左边或最右边的边缘。

因为它是可变宽度的，所以我不能简单地使用固定宽度值的一半来计算偏移量以获得 div 的中点到 (z)

另外，div是绝对定位的，默认不占满宽度

这里是一个错误的例子:

http://jsbin.com/rejaduxepe/edit?html,css,output

.bar {
  width: 80%;
  position: absolute;
  top: 0;
  height: 25px;
  border-radius: 2px;
  border: solid 1px #F09;
}

.value {
  position: absolute;
  height: 19px;
  line-height: 18px;
  border-radius: 2px;
  top: 2px;
  background-color: #0F9;
  border: solid 1px #F90;
  color: #000;
  left: 20%;
}

<div class="bar">
  <div class="value">123v452</div>
</div>

我不想简单地将 div value 置于 bar 的中心。

我希望 value div 的“中点”是从 bar 开始的 20%，但我不知道value div 的宽度。

上面的代码将 value 的“最左边”部分设为从 bar 开始的 20%，而不是“中点” "的 value 为 20% 从 bar

开始

Answer 1

您可以使用绝对定位和平移元素，或者您可以在父元素上使用 flex。

div{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

或

.divWrapper{
  display: flex;
  justify-content: center;
}